Question

我是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视图对我没有多大帮助

再次感谢

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

Answer 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。

Answer 3

我想你想知道Backbone.Events（http://backbonejs.org/#Events），模型和视图都使用这个模块，以及视图如何学习模型中的变化，如果你想了解如何实现这一点您可以随时阅读带注释的来源（http://backbonejs.org/docs/backbone.html#section-19），但更重要的是我想您想了解观察者模式：http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript。

如何在backbone.js中连接模型和视图

3 个答案: