在 Ember 把手模板中渲染已解决的承诺值 [英] Rendering resolved promise value in Ember handlebars template

问题描述

是否有一种在把手模板中呈现承诺结果的好方法?

Is there a good way to render the result of a promise in a 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')
});

我想像这样在车把模板中呈现位置的值:

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.

这是有效的，因为在 get 和 set 上都调用了计算属性，您可以通过参数的数量来区分两者 - 1 表示 get，多于 1 表示 set(过去是 2，现在您得到 3，所以最好的检测方法是> 1).在文档中有更多相关信息.

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.

从计算属性(无论是在 get 还是 set 中)返回的任何内容都将被缓存，直到其依赖属性发生更改 - 在本例中为 topic.course.lessons.

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.

在上面的例子中，当第一个 get 进来时，我们开始计算并返回 null.这现在被缓存为属性的值，如果在 promise 解决之前有其他任何东西调用这个属性，那么它会返回 null.

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.

一旦promise解决了，我们就用计算出的值在同一个属性上调用set.我们只是在 setter 中返回它，现在它被缓存为属性的值.

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.

直到依赖属性发生变化(topic.course.lessons)，或者一个新值被set，然后从属性返回缓存的值.

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屋！