Javascript EmberJS-保持模型与本地存储中的数据同步

我的路由器看起来像这样

-Contacts
    -Details
-Dashboard
-Listings

一旦联系人被打开（即，转换为

联系人。详细信息

），该联系人应在

最近的联系人

下进行跟踪。这些

最近的联系人

随后显示在其他路径中，如

数据板

和

列表

。我在

ContactsDetailsController

中添加了一个名为

updateRecentContacts

的操作。在这里，我手动将这些联系人保存到本地存储

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);
        }
    }
});

由于这些

联系人

将显示在各种其他路由中，因此我在

ApplicationController

中添加了一个名为

recentContacts

的属性，并将其值设置为

localStorage

中的数据。现在，我可以使用

render

帮助程序在任何路径中渲染这些联系人，并将此

ApplicationController

的contacts属性作为模型提供

    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>

App.ApplicationController=Ember.ArrayController.extend({
最近：{
联系人：store.get（'recentContacts'）
}
});
{{#controllers.application.recent.contacts中的每个联系人}
{{/每个}}

这是可行的，但呈现的数据与localStorage数据相比已过期。只有在硬刷新后才会显示正确的数据

---

我的问题是，如何保持这些数据的同步？我甚至不确定我这样做是否正确。当然，其他人一定遇到过这样一种情况：他们需要更有效地跟踪路线上的内容（最近的帖子、文章等）。我没有使用余烬数据，因为我不确定是否值得仅为这个

最新联系人

型号使用它。

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

在您的情况下，如果您不想更改

详细信息

（在我的情况下为

索引

）控制器中的任何内容，我会这样做

通过

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>

{{{#每个application.recent.contacts}
{{this}
{{/每个}}

---

要看到它的实际应用，这里有一个jsbin给你：

你好，奥利弗，谢谢你抽出时间。这很有效。因为我们在

详细信息中引用了
应用程序控制器
，我们不能直接在那里更新
最近的.contacts
属性吗？我试过了，它似乎像预期的那样工作，但不确定它是否是正确的方法。我相信这两种方法都有利弊。事件鼓励更松散耦合的设计，而方法调用确保冒泡路径上没有其他实例“意外”使用事件。