在数组上使用set()

时间:2013-10-07 14:15:43

标签: ember.js

我有一个EmberArray,可以在当天级别缓存所有活动。因此,如果我在7月1日从服务器中提取活动,则会在activitiesByDay['2013-07-01']中找到。我的问题是如何get()和set()这些数组项,以便我可以利用Ember的Run Loop和数据绑定属性。

这是完整的代码:

module.exports = App.ActivitiesRoute = App.AuthenticatedRoute.extend({
    onDate: null,
    actionList: Ember.ArrayController.create(),
    activitiesByDate: Ember.Array,
    activitiesOnDate: function() {
        return this.get('activitiesByDate')[this.get('onDate')].content;
    }.property('activitiesByDate','onDate'),
    if (!this.get('activitiesByDate')[params.on_date]) {
        this.set('activities', this.store.find('activity', {on_date: params.on_date}));
        this.get('activitiesByDate')[params.on_date] =
            this.store.filter('activity',function(activity){        
                var itemDate = new Date(activity.get('start_time'));
                itemDate = moment(itemDate).format('YYYY-MM-DD');
                return itemDate === params.on_date;
            });
    }

正如您所看到的那样,该项目表示......

  

this.get('activitiesByDate')[params.on_date] =

是一个问题,因为我在不让Ember知道的情况下进行更改。问题是我找不到在数组上使用Ember的set()的方法,其中键是“YYYY-MM-DD”格式的日期。我认为,这个关键结构要求我使用Javascript的括号表示法与Ember应该处理的点符号。

----更新----

我稍微更新了ActivitiesRoute,以便activitiesByDate是一个对象而不是一个Ember.Array。我还将所有setter / getter更改为此对象的属性以使用Embers get / set()`

App.ActivitiesRoute = App.AuthenticatedRoute.extend({
    onDate: null,
    activitiesByDate: Ember.Object.create(),
    activitiesOnDate: function() {
        return this.get('activitiesByDate.' + this.get('onDate'));
    }.property('activitiesByDate'),

    model: function(params) {
        this.set('onDate', params.on_date);
        // check if the given date has activities already loaded and if not then load it
        // if it does then do NOT reload. In the case of wanting a refresh use the refreshDate() method
        if (!this.get('activitiesByDate')[params.on_date]) {
            console.log('getting activities for: ' + params.on_date);
            this.set('activities', this.store.find('activity', {on_date: params.on_date})); // go get the dates from Server
            this.set('activitiesByDate.' + [params.on_date], this.store.filter('activity',function(activity){       
                var itemDate = new Date(activity.get('start_time'));
                itemDate = moment(itemDate).format('YYYY-MM-DD');
                return itemDate === params.on_date;
            }));
        }

        return true;
    },
    setupController: function(controller, model) {
        controller.set('activitiesByDate',this.get('activitiesByDate'));
    }

activitiesByDate对象似乎工作正常。这是一个例子,说明在三个不同的日期之后状态是什么样的:

查看这些对象,我可以看到它们包含适量的活动,因此该部分看起来很好。不幸的是,当我在浏览器中重新加载时,我的计算属性 - activitiesOnDate没有被更新。

1 个答案:

答案 0 :(得分:1)

如果您使用set('someProperty.' + dynamicProperty, value)get('someProperty.' + dynamicProperty),您将获得所需内容。在你的情况下:

获取过滤结果

//Instead of
this.get('activitiesByDate')[this.get('onDate')]

// You would use 
this.get('activitiesByDate.' + this.get('onDate'));

设置过滤结果

// Instead of
var filtered = this.store.filter('activity',function(activity){        
    var itemDate = new Date(activity.get('start_time'));
    itemDate = moment(itemDate).format('YYYY-MM-DD');
    return itemDate === params.on_date;
});

this.get('activitiesByDate')[params.on_date] = filtered;


// You would use 
var filtered = this.store.filter('activity',function(activity){        
    var itemDate = new Date(activity.get('start_time'));
    itemDate = moment(itemDate).format('YYYY-MM-DD');
    return itemDate === params.on_date;
});

// if some key change, notify the entire property
Ember.propertyWillChange(this, 'activitiesByDate');
this.set('activitiesByDate.' + params.on_date, filtered);
Ember.propertyDidChange(this, 'activitiesByDate');