模型和视图在backbone.js 中是如何连接的答案

【问题标题】：how model and view are connected in backbone.js模型和视图在backbone.js 中是如何连接的
【发布时间】：2015-09-01 19:12:14
【问题描述】：

我是 Backbone.js 的新手，我一直无法理解模型和视图是如何连接的。

我玩过 Angular，那里的东西很清楚，模型、视图和控制器是如何连接的。

我知道 Angular 和 Backbone 是不同的，后者是 MV*。

在 Backbone 中，我可以了解模型和视图是如何创建和工作的，但它们是如何连接的？在我看来，他们是分开的。

请花一点时间解释一下或给我指点教程。

提前致谢

编辑

好的，这是一个例子。碰巧我读了巨魔建议的书。这是来自本书github的code

我开始阅读。我了解Todo 模型。我了解TodoList 集合。然后我到TodoView

创建一个新的li
使用Underscore模板编译html
定义了一些稍后在同一视图中实现的函数
定义一个初始化函数

在那个函数里面

这是什么？ this.model.bind('change', this.render, this); 他如何神奇地将动作change 绑定到模型？代码如何知道模型？他是什么时候定义模型的，又是如何定义的？正因为有，代码就知道model = Todo 模型？

他是如何绑定的？我错过了什么。这让我很困惑，所以阅读 AppView 视图对我没有多大帮助

再次感谢

【问题讨论】：

模型和视图应该分开——这就是MVC的重点。控制器在两者之间进行调解。可能让您感到困惑的是，在 Backbone 中，没有正式的控制器概念。
@GeorgeJempty 是的，我知道没有控制器，我提到 Backbone 是一个 MV*。另外，我认为模型和视图应该分开。但我没有找到两者之间的联系。
只是谷歌一些教程
@GeorgeJempty 我已经这样做了，我也看过一些视频，但我仍然无法获得它。这就是我在这里问的原因
你需要更具体。您是否尝试过根据教程自己编写任何主干代码？如果是这样，请发布一些代码。或者贴出你不理解的教程代码的哪些部分。

标签： backbone.js mvw

【解决方案1】：

在backbone.js 中，视图用于在浏览器中显示模型。例如，您可以有一个模型对象，其 JSON 表示类似于以下内容：{'firstName': 'foo', 'lastName': 'bar' } 并且您使用视图对象将此模型映射到浏览器 DOM。通常，您将视图对象与某些模板引擎一起使用。模板允许创建填充模型数据的 html 块。如果您使用underscore 模板函数，您的模板可能如下所示：

<div>
    <div>First Name: <%= firstName %></div>
    <div>Last Name: <%= lastName%></div>
</div>

将模板与模型数据合并后：

<div>
   <div>First Name: foo</div>
   <div>Last Name: bar</div>
</div>

你可以重用这个视图对象和它的模板来显示另一个模型对象，例如{'firstName':'another foo', 'lastName':'another bar'}，这样结果html就会是：

<div>
   <div>First Name: another foo</div>
   <div>Last Name: another bar</div>
</div>

关于模型和视图之间的连接是一回事。视图对象也可以监听模型对象的变化以立即呈现最后的更新。例如（内部视图对象）： initialize: function() {this.listenTo(this.model, 'change', this.render);}

【讨论】：

谢谢。我还有问题。检查我原来问题中的编辑
您似乎想知道'change'事件是如何出现的。更改是模型数据更改时触发的逻辑事件。
嘿，我的错误，我重新编辑了，这不是我要问的。我在问代码是如何知道model 表示之前的Todo 模型。
当你创建视图对象时，你将模型对象传递给它的构造函数： var modelObj = new MyModel({'id':id}); var myView = new MyView(({'el': $('#some_id').first(), 'model': modelObj}));以后的模型对象在视图对象的代码中作为 this.model 可用。

【解决方案2】：

简而言之，视图是将模型数据呈现给用户的逻辑。因此，在其最简单的形式中，您可以通过模型更改事件将模型绑定到视图，这样您就可以在数据更改时立即更新演示文稿。因此，一个简单的视图会接受一个模型，基于该模型数据创建 HTML 元素，将该 html 插入 DOM 并在数据更改时更新该 HTML。

您可以在此处（免费）找到一本包含大量有用示例的好书：http://addyosmani.github.io/backbone-fundamentals/

编辑：

关于您更新的关于视图如何了解模型的问题，this.model 是对实际模型对象的引用。您可以在创建视图时设置对模型的引用。也就是说，当您调用视图构造函数来实例化视图时，您可以传入模型。您需要在代码示例中一直深入到 AppView 对象中才能看到发生这种情况的位置，在 addOne 方法中：

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
}

该函数获取一个模型作为参数，并在实例化视图时引用该模型。所以现在你有一个知道模型的视图，当view.render 方法被调用时，视图可以用模型数据渲染它的模板。当您更改模型中的数据时，例如使用 set 方法 myModel.set({title: "March 20", content: "In his eyes she eclipses..."});，您会触发该模型的 change 事件。您可以在此处查看主干的所有内置事件：http://backbonejs.org/#Events-catalog。视图正在侦听该事件，就像它可以侦听单击事件或任何其他事件一样。在您示例的代码中，视图侦听模型中的更改事件。如果它听到它就知道this.model 后面的对象已更改，然后它可以使用新数据更新 DOM 或执行其他操作。在示例的情况下，它调用this.render，它使用新的模型数据更新 DOM。

【讨论】：

一个让我感到困惑的例子来自你推荐的书。请检查我在原始问题中的编辑。谢谢

【解决方案3】：

我想你想知道 Backbone.Events (http://backbonejs.org/#Events)，模型和视图都使用这个模块，这就是视图如何了解模型中的变化，如果你想了解它是如何实现的总能读到带注释的源码（http://backbonejs.org/docs/backbone.html#section-19），但更重要的是我想你想了解观察者模式：http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript。

【讨论】：