Ember.js 中的订阅者/观察者模式答案

【问题标题】：Subscriber/Observer pattern in Ember.jsEmber.js 中的订阅者/观察者模式
【发布时间】：2012-01-10 07:26:35
【问题描述】：

是否可以在 Ember.js 中使用订阅者/观察者模式？例如，视图 A 和视图 B 都监听模型 C 内部的变化。这需要模型 C 能够触发自定义事件。我一直试图弄清楚如何在 Ember.js 中制作模型触发事件，但到目前为止还没有运气。

【问题讨论】：

【解决方案1】：

我相信您正在寻找的功能在 Ember.js 中称为“绑定”。

主页上有大量示例描述了如何执行您的建议，但这里有一个快速回顾：

window.MyApp = Ember.Application.create();

MyApp.MyModel = Ember.Object.create({
  myProperty: "Hello World!",

  goodbye: function() {
    this.set("myProperty", "Goodbye!");
  })
});

MyApp.modelInstance = MyApp.MyModel.create();

现在在 <body> 标签内创建两个视图：

<script type="text/x-handlebars">
  View1: <b>{{MyApp.modelInstance.myProperty}}</b>
</script>

<script type="text/x-handlebars">
  View2: <b>{{MyApp.modelInstance.myProperty}}</b>
</script>

现在页面应该呈现并且您会看到两个视图都说“Hello World！”。打开控制台并输入

MyApp.modelInstance.goodbye();

你会看到你的观点变成说“再见！”。

视图通过使用双花括号自动创建到MyApp.modelInstance.myProperty 的绑定，但您可以通过多种方式创建绑定。每当myProperty 的值发生变化时，所有的绑定都会自动更新。但是请注意，您必须调用 set("myProperty", "something new") 以便 Ember 知道为您更新绑定；如果您只说myProperty = "something new"，它不会触发任何更改事件。

【讨论】：

【解决方案2】：

至少在 Sproutcore 中，这就是绑定的用途。

如果你有模特

App.Person = SC.Object.extend({
   name: 'Bruce Banner'
});

然后您将拥有一个控制器，例如

App.personController = SC.ObjectController.create();

然后您可以在控制器上设置内容

App.personController.set('content', somePerson);

现在，任何视图都可以绑定到模型对象上的数据。

SC.LabelView = SC.LabelView.extend({
...
    valueBinding: 'App.personController.name'
})

所以如果你改了名字

somePerson.set('name', 'Chris');

视图会自动更新。

【讨论】：

其实我一直在寻找的是让视图A能够通过模型C与视图B对话。例如，如果视图A是一个项目列表，那么点击一个关键字就会触发一个事件在模型 C 中。然后视图 B 监听模型 C 的事件，视图 B 会相应地处理该事件。
这种情况下的型号是什么？有一些示例代码会有所帮助。模型对象应该代表应用程序中的数据（从服务器加载）。您在谈论的似乎是关于应用程序和视图状态。