0

日レベルですべてのアクティビティをキャッシュする EmberArray があります。したがって、サーバーから 7 月 1 日のアクティビティを取得した場合、activitiesByDay['2013-07-01']. 私の問題は、これらの配列項目を get() および set() して、Ember の実行ループとデータ バインディング プロパティを利用できるようにする方法です。

完全なコードは次のとおりです。

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に知らせずに変更を加えているため、問題があります。set()問題は、キーが「YYYY-MM-DD」形式の日付である配列でEmber を使用する方法が見つからないことです。このキー構造では、Javascript のブラケット表記ではなく、Ember が処理すべきドット表記を使用する必要があると思います。

- - アップデート - -

が Ember.Array ではなくオブジェクトActivitiesRouteになるように少し更新しました。activitiesByDateまた、すべてのセッター/ゲッターをこのオブジェクトのプロパティに変更して、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オブジェクトは正常に動作しているようです。以下は、3 つの別々の日付に移動した後の状態の例です。

これらのオブジェクトの内部を見ると、適切な量のアクティビティが含まれているため、その部分が見栄えがすることがわかります。残念ながら、計算されたプロパティ --activitiesOnDateは、ブラウザーでリロードを押したとき以外は更新されていません。

4

1 に答える 1

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');
于 2013-10-07T23:01:52.447 に答える