根据EmberJS中的列表数据更改html属性

时间:2015-02-13 13:05:18

标签: ember.js

在Ember中,我们使用{{each}}来遍历项目列表。

我们希望根据数据项是否包含文本"COMPLETE"来更改属性。

如果数据item = "COMPLETE"然后更改div样式,否则不会。

2 个答案:

答案 0 :(得分:0)

在Application.js中,添加一个名称的Handlebar,它接受一个值。

这将返回包含在a中的值,并且根据内容,它将返回plain或styles span元素。

Ember.Handlebars.registerBoundHelper('styled_status', function(value) {
    var escaped = Handlebars.Utils.escapeExpression(value);
    if(escaped == "COMPLETE_SUCCESS") {
    return new Ember.Handlebars.SafeString('<span>' + escaped + '</span>');
  }
    return new Ember.Handlebars.SafeString('<span class="label label-danger">' + escaped + '</span>');
});

可以从html页面调用Handlebar,如下所示;

<p>{{styled_status listelement.jobStatus}}</p>

答案 1 :(得分:0)

我更喜欢使用控制器的itemController属性并将该属性绑定到属性。

{{#each post in controller}}
  <li {{bind-attr class="post.isComplete:complete"}}>{{post.title}} ({{post.titleLength}} characters)</li>
{{/each}}


App.PostsController = Ember.ArrayController.extend({
  itemController: 'post'
});

App.PostController = Ember.ObjectController.extend({
  // the `title` property will be proxied to the underlying post.
  titleLength: function() {
    return this.get('title').length;
  }.property('title'),
  isComplete : function(){
    return Ember.isEqual(this.get('state'), 'COMPLETE');
  }.property('state')
});

希望,这有帮助