Question

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

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

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

Answer 1

在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>

Answer 2

我更喜欢使用控制器的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')
});

希望，这有帮助

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

2 个答案: