模型中的 Emberjs 计算属性

Question

我正在尝试使用模型中的计算属性来呈现模板中的数据。这是我的模型的 sn-p：

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

这是我的模板的 sn-p：

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

但我收到以下错误：“断言失败：属性必须是数字、字符串或布尔值，而不是函数”。我正在关注这篇文章：Ember.js binding a css style in a template，但不知何故它不起作用。有什么想法吗？

Answer 1

您需要在模型类上定义它，而不是在模型钩子内部，或者与路由关联的控制器类 (application)。

Answer 2

您没有在model 函数中定义计算属性。您必须在控制器或路由上定义计算属性。 See here for more information about computed properties.

---

但是当您尝试在 each 循环中计算样式时，您需要采用不同的方法来获取每个项目的样式。

我会使用这样的Ember Handlebars 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 循环和包含样式信息的模型来创建：

我希望这会有所帮助。