在Ember手柄模板中呈现解决的承诺值 [英] Rendering resolved promise value in Ember handlebars template

问题描述

例如，我有以下模型：

  App.TopicItem = DS.Model.extend（{
 topic：DS.belongsTo（'topic'），
 paddedPosition： function（）{
 return this.get（'topic.course.lessons'）
 then（function（lessons）{
 return lessons.indexOf（topicItem）; 
} ）
 then（function（index）{
 var position = index; 
 
 if（position< 0）{
 return; 
} 
 
 position = position + 1; 
 
 return（position< 10？$ .rjust（position，2，'0'）：position.toString（））; 
}）; 
} .property（'topic.course.lessons'）
}）; 
  

我想在句柄模板中渲染位置的值，如下所示：

  {{topicItem.paddedPosition}} 
  

有没有一个很好的方法来完成这个？

解决方案

你可以让这个属性懒惰地设置自己，类似于：

  App.TopicItem = DS.Model.extend（{
 topic：DS.belongsTo（'topic '），
 paddedPosition：function（key，value）{
 if（arguments.length> 1）{
 //> 1 args =这是一个`set` 
返回值; 
} else {
 //否则这是一个`get` 
 var _this = this; 
 value = null; 
 
这个.get（'topic.course.lessons'）
 then（function（lessons）{
 //根据结果做的东西
 var padded = ...; 
 / /当承诺得到解决时，请将该属性设置为
 _this.set（paddedPosition，填充）; 
 
 //如果承诺立即解决，设置`value`，所以我们返回
 //计算的值而不是null 
 value = padded; 
}）; 
 
 //如果承诺不立即解决，则返回null;如果
返回值，则
 //计算的值; 
} 
} .property（'topic.course.lessons'）
}）; 
  

当第一次访问它将启动计算，同样随着课程的改变，它将自己设置为计算完成后的结果。

这是因为在get和set上调用了计算属性，可以区分两者通过参数的数量 - 1为get，超过1为set（它曾经是2，现在你得到3，所以最好的方法来检测是> 1）。更多信息文档。

从计算的属性返回的任何值（在get或set中）都被缓存，直到其依赖属性发生更改 - 在这种情况下， topic.course.lessons 。

在上面的例子中，当第一个获得时，我们启动了计算并返回空。现在这是缓存为属性的值，如果有任何其他的东西在承诺解决之前调用此属性，那么它将返回 null 。

一旦承诺得到解决，我们将调用集合与相同的属性与计算值。这个我们只是在setter中返回，现在它被缓存为属性的值。

直到依赖属性更改（ topic.course.lessons ），或新值为 set 然后从属性返回缓存的值。

Is there a good way to render the result of a promise in a handlebars template?

For example, I have the following model:

App.TopicItem = DS.Model.extend({
  topic: DS.belongsTo('topic'),
  paddedPosition: function() {
    return this.get('topic.course.lessons').
      then(function(lessons) {
        return lessons.indexOf(topicItem);
      }).
      then(function(index){
        var position  = index;

        if (position < 0) { 
          return;
        }

        position = position + 1;

        return (position < 10 ? $.rjust(position, 2, '0') : position.toString());
      });
  }.property('topic.course.lessons')
});

And I would like to render the value of the position in the handlebars template like this:

{{topicItem.paddedPosition}}

Is there a good way to accomplish this?

解决方案

You could have the property lazily set itself, something like:

App.TopicItem = DS.Model.extend({
  topic: DS.belongsTo('topic'),
  paddedPosition: function(key, value) {
    if (arguments.length > 1) {
      // > 1 args = this is a `set`
      return value;
    } else {
      // otherwise this is a `get`
      var _this = this;
      value = null;

      this.get('topic.course.lessons').
        then(function(lessons) {
          // do stuff based on result
          var padded = ...;
          // when the promise is resolved, set this property with the value
          _this.set("paddedPosition", padded);

          // if the promise resolves immediately, set `value` so we return
          // the calculated value and not null
          value = padded;
        });

      // returns null if the promise doesn't resolve immediately, or 
      // the calculated value if it's ready
      return value;
    }
  }.property('topic.course.lessons')
});

When it's first accessed it'll kick-off the calculation, likewise any time the lessons change, then it'll set itself as the result of the calculation once it's done.

This works because a computed property is called both on get and set, you can differentiate between the two by the number of arguments - 1 for get, more than 1 for set (it used to be 2, now you get 3 so the best way to detect is > 1). More on that in the docs.

Whatever's returned from a computed property (either in get or set) is cached until its dependent properties change - in this case topic.course.lessons.

In the above example, when the first get comes in we kick off the calculation and return null. This is now cached as the value of the property, if anything else calls this property before the promise has resolved then it'll return null.

Once the promise resolves, we call set on the same property with the calculated value. This we just return in the setter and it's now cached as the value of the property.

Until the dependent properties change (topic.course.lessons), or a new value is set then the cached value is returned from the property.

这篇关于在Ember手柄模板中呈现解决的承诺值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！