0

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

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

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

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

请花一点时间来解释或指向我的教程。

提前致谢

编辑

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

我开始阅读。我理解Todo模型。我了解TodoList收藏。然后我到TodoView

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

在那个函数里面

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

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

再次感谢

4

3 回答 3

1

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

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

于 2015-09-01T20:18:26.847 回答
0

简而言之，视图是将模型数据呈现给用户背后的逻辑。因此，在最简单的形式中，您可以通过模型更改事件将模型绑定到视图，这样您就可以在数据更改时立即更新演示文稿。因此，一个简单的视图将采用模型，基于该模型数据创建 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。

于 2015-09-01T20:13:14.377 回答
0

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

于 2015-09-03T01:00:48.540 回答