javascript - Emberjs模型中的计算属性

Question

我正在尝试在模型中使用计算属性来呈现模板中的数据。这是我的模型的片段:

App.ApplicationRoute = Ember.Route.extend({
    model: function() {  
    ...
        divStyle: function() {
           return "height:" + this.get('height') + "px; color:"+ this.get('color') +";";
        }.property('height', 'color')
    }
}

这是我的模板的片段:

{{#each}} <div {{bindAttr style="divStyle"}}</div> {{/each}}

但是我收到以下错误:“断言失败:属性必须是数字，字符串或 bool(boolean) 值，而不是函数”。我在关注这篇文章: Ember.js binding a css style in a template，以某种方式不起作用。有任何想法吗？

Answer 1

您没有在model函数中定义计算属性。您必须在 Controller 或路径上定义计算的属性。 See here for more information about computed properties。

但是，当您尝试在each循环中计算样式时，需要采用其他方法来获取每个商品的样式。

我会像这样使用Ember Handlebars Helper来设置样式。

helper

Ember.Handlebars.registerBoundHelper("getStyle", function(o){
    return "height: " + o.height + "px;" +
           "width: " + o.width + "px;" +
           "background-color: " + o.color; 
});

用法

{{#each}}
    <div style="{{unbound getStyle this}}"></div>
{{/each}}

演示版

您会看到一个有效的 JSBin here。
本演示使用一个each循环和一个包含样式信息的模型来创建此模型:

我希望这有帮助。