Question

我的路由器看起来像这样。

-Contacts
    -Details
-Dashboard
-Listings

联系人打开后（即转换为contacts.details），应在recent contacts下跟踪该联系人。然后，这些recent contacts会显示在dasboard和listings等其他路线中。我在updateRecentContacts中添加了一个名为ContactsDetailsController的操作。在这里，我手动将这些联系人保存到本地存储。

APP.ContactsDetailsController = Ember.ObjectController.extend({
    actions: {      
        updateRecentContacts: function(contact) {
            // Do some processing and then add it to localStorage
            // Note: store refers to a localStorage plugin. Not Ember Data
            store.set('recentContacts', recentContacts);
        }
    }
});

由于这些contacts将在其他各种路径中显示，因此我在recentContacts中添加了一个名为ApplicationController的属性，并将其值设置为localStorage中的数据。现在，我可以使用render帮助程序在任何路径中呈现这些联系人，并提供此ApplicationController的联系人属性作为模型。

    App.ApplicationController = Ember.ArrayController.extend({
        recent: {
            contacts: store.get('recentContacts')
        }
    });


<script type="text/x-handlebars" data-template-name="recentContacts">
    {{#each contact in controllers.application.recent.contacts}}
        <!-- Render this template using {{render}} helper in any other view -->
    {{/each}}
</script>

这样可行，但正在呈现的数据已从localStorage数据中过时。正确的数据仅在硬刷新后显示。

我的问题是，如何保持这些数据同步？我甚至不确定我是否以正确的方式这样做。当然，其他人必须遇到一个场景，他们需要更有效地跟踪各个路线（最近的帖子，文章等）。我没有使用Ember Data，因为我不确定是否值得将它用于此recentContacts模型。

Answer 1

您需要手动更新ApplicationController的属性值以反映您的更改。

在你的情况下，我会这样做，假设你不想在你的details（在我的案例index）控制器中改变任何内容。

通过needs属性注入您的应用程序控制器。基本上计算的别名是可选的，但我们喜欢它的花哨和闪亮，不要我们......

App.IndexController = Ember.Controller.extend({
  needs: 'application',
  application: Ember.computed.alias('controllers.application')
});

ApplicationController看起来像这样：

App.ApplicationController = Ember.Controller.extend({
  recent: {
    contacts: ['red', 'yellow', 'blue']
  }
});

重要部分位于ApplicationRoute中。在这里，我们处理由于余烬事件冒泡而产生的动作。在这里，我们可以更改应用程序控制器属性，如果数据绑定正确，它将反映在整个应用程序中。

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    updateContacts: function () {
      console.log('Doing stuff in application route...')
      this.controller.recent.contacts.pushObject('gold');
    }
  }
})

模板看起来像

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each application.recent.contacts }}
    <li {{action 'updateContacts'}}>{{this}}</li>
    {{/each}}
  </ul>
</script>

要看到它的实际效果，请为您提供一个jsbin：http://emberjs.jsbin.com/dibep/1/edit

EmberJS - 使模型与localStorage中的数据保持同步

1 个答案: