Javascript 应用程序的视图或部分如何在emberjs中相互通信

我最近在研究emberjs。我有一个关于观点如何相互沟通的问题。我知道视图无法通信，因此问题可能是路由或控制器（视图模型）

来自其他框架和语言，我使用了一种称为pubsub的模式来传播某些信息已更改的信息，以及其他视图（对该信息感兴趣的视图）将订阅并在发送事件/消息时进行更新

这也是一种适用于恩伯斯哲学的模式吗？或者，如何根据其他部分的更改更新UI上的不同部分

一个（非常）简单的例子可以是：

-> Application
  -> Navigation which contains a Link to the posts route with a number of current posts (count)
  -> Posts route would have a list of post with details (and add,delete,etc) actions

现在，当我创建一篇文章时，它将被添加到列表中，我应该如何更新导航中的文章计数

显然，这也适用于更复杂的示例。 请注意： 目前，我还有一个统计数据的服务器路由。因此，导航和它的posts计数将从服务器获取，并且它不会绑定到post数组的长度

---

在Ember.js中，处理此类事情的最佳方法是什么？

这在Ember.js中非常简单。有不同的设置方法，但基本内容如下：因为Ember是一个MVC框架，所以所有视图都可以访问相同的底层数据。在对数据进行更改时，Ember的数据绑定将确保所有关心该更改的视图都将更新

因此，特别是对于您提到的示例，您可以简单地在模板中包含

{{content.length}

，它将显示ArrayController中的项目数（由Ember自动生成，但如果您想添加功能，您可以覆盖它）。看一看

模板：

<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>    
    {{ render 'navigation' controllers.users.content }}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="navigation">
      <h2>Index Content ({{ content.length }}):</h2>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each}}
      <li>{{firstName}} {{lastName}}</li>
  {{/each}}
   </ul>
   <button {{action 'add'}}>Add</button>    
</script>

控制器：

App.ApplicationController = Ember.Controller.extend({
    needs: ['users'],
});

App.IndexController = Ember.ArrayController.extend({
    actions: {
        add: function() {
            this.get('store').createRecord('user', {firstName: 'New', lastName: 'Person'});
        }
    }
});

单击按钮时，您将看到计数是如何自动更新的。请注意，在本例中，我们只有一个路由（以便更好地说明数据绑定），但如果您有一个索引路由（列出所有帖子）和一个详细路由（显示单个帖子），这也同样有效

欢迎来到Ember.js的神奇世界：）

如中所述，视图基本上用于处理用户事件和创建可重用组件。然而，一些有用的事实是

1。

视图

模板将显示的内容基于相应的

控制器所持有的模型和属性

2。
视图
可以访问其相应的
控制器
以及任何其他相关控制器（通过
需要
属性）及其所保存的数据

3。如果视图共享一个模型，则在模型更改时将更新视图。在一些情况下，最常见的是通过
{{view}}
帮助程序插入视图。（）

4。如果视图或其相应的控制器正在观察或绑定到公共属性，则它们也将被更新（）

考虑到这些事实，可以根据特定系统的要求来解决这个特殊问题。例如，一些选项可能是（附带粗略示例）


如果在执行crud操作时所有数据/帖子都可用，那么绑定到
帖子
控制器的帖子枚举（）可以更新显示帖子总数的关联
导航
控制器的计算属性



如果延迟加载数据（例如在页面中），则使用
导航
控制器
观察
对
帖子
控制器帖子枚举的更改，可能会触发服务器请求检索帖子总数或根据操作更新计数器值（创建/删除）



Navigation
视图可以简单地插入到
Posts
视图中，共享相同的模型，并具有显示总Posts的计算属性



Navigation
视图可以通过带有post模型的
{{render}
帮助程序来呈现。（）

感谢您的回复和代码示例。问题是计数将超出IndexController范围。导航位于{{outlet}上方的应用程序模板中。和计数应该从服务器拉不到长度通过ajaxI更新我的答案，以解决您的评论。所有这些都是可能的——我使用DS.FixturesAdapter来模拟服务器。通常，您会使用类似于DS.RESTAdapter的东西，它将处理您与后端的通信。例如，当您调用
this.store.findAll（'user'）
时，它会向
/users
发送一个
GET
请求，您的数据（以及您的“计数”）会自动更新。在我的编辑中，我还删除了computed属性
count
，因为handlebar允许您通过
{{content.length}
App.ApplicationController = Ember.Controller.extend({
    needs: ['users'],
});

App.IndexController = Ember.ArrayController.extend({
    actions: {
        add: function() {
            this.get('store').createRecord('user', {firstName: 'New', lastName: 'Person'});
        }
    }
});