Ember.js:数组中当前元素的计算属性

时间:2013-10-29 14:55:07

标签: javascript ember.js

所以,这就是我的模型看起来的样子(由夹具数据表示):

var posts = [{
    id: 'b026324c6904b2a9',
    title: "My new front door",
    author: { name: "Matthieu" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: 'new',
    hidden_message: "hidden1"
}, {
    id: '26ab0db90d72e28a',
    title: "Best pizza in town",
    author: { name: "Harry" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: '',
    hidden_message: "hidden2"
}, {
    id: '6d7fce9fee471194',
    title: "Skateboard dreamland",
    author: { name: "Matthieu" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: 'solved',
    hidden_message: "hidden3"
}, {
    id: '48a24b70a0b37653',
    title: "my house looks like a pumpkin",
    author: { name: "Harry" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: '',
    hidden_message: "hidden4"
}];

我的路线:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return posts;
    }
});

而且,如果相应的帖子是新的,我希望能够在模板中显示某个HTML,如果它已经解决,则可以显示另一个HTML,如果状态为空,则无需显示任何HTML。在我看来,好像最好的方法是使用{{#if}}帮助器,但不进行相等比较,它只能采用布尔变量。所以,我想做这样的事情:

App.IndexController = Ember.ArrayController.extend({

    isNew: function(val) {

        if(this.get('currentitem.status') === 'new') {
            return true;
        }

        return false;

    }.property('isNew')

});

但我无法找到如何在模板中选择{{#each}}当前访问的项目。这是否可能,如果是,我该怎么做(或类似的东西)?

全部谢谢!

2 个答案:

答案 0 :(得分:3)

执行此操作的正确方法是创建itemcontroller,通过为集合中的每个项目提供控制器来帮助您。

App.IndexController = Ember.ArrayController.extend({
    itemController: "PostItem",
});

App.PostItemController = Ember.ObjectController.extend({
    isNew: function() {
        if(this.get('status') === 'new') {
            return true;
        }
        return false;
    }.property('status')
});

然后在您的车把模板中,您只需在{{isNew}} - 上下文中调用{{#each}}

我已经提出了一个可以测试它的工作小提琴。

http://jsfiddle.net/LordDaimos/v8NR3/1/

答案 1 :(得分:1)

最好的方法可能是将每个帖子包装在具有isNew方法的对象中,如下所示:

var postObject = Ember.Object.extend({
    isNew: function() {

        if(this.get('status') === 'new') {
            return true;
        }

        return false;

    }.property('status')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return posts.map(function(post){
            return postObject.create(post);
        });
    }
});

这样你就可以在每个帖子上查询。