Question

我最近潜入了可怕的东西.. :)可怕的东西是热门js frameworks的来源，如backbone.js，angular.js，vue.js等等。

我将以Backbone为例。我想弄清楚模型是如何附加到视图的？

这是代码，如果有人可以指出发生这种情况的部分，那就太棒了！ https://github.com/jashkenas/backbone/blob/master/backbone.js

实际上，我不明白的部分是在任何地方都没有调用innerHTML，那么元素如何被数据填充？

Answer 1

Backbone不是Angular，它不会为你绑定模型到html，它实际上也不会为你渲染视图，你必须在视图中实现渲染方法并在找到合适的时候调用它们。事实上，我认为对于来自双向绑定框架的开发人员来说可能会让人感到困惑。 Backbone就是为开发人员提供所有控制权，但你必须自己完成所有工作。

最小型号=＆gt;查看流程示例将类似于

var MyModel = Backbone.Model.extend({

  defaults: {
    test: 'test',
  },

  initialize: function (options) {
    console.log(this.get('test'));
  },
});

var MyView = Backbone.View.extend({

  el: '#your-el',

  initialize: function (options) {
    this.template = _.template('<div><%= test %></div>');        
    this.listenTo(this.model, 'change', this.render);
  },

  render: function () {
    // rendering happens here, innerHTML, $.html(), whichever you prefer
    // and you can pass model data as this.model.toJSON()
    // or you can pass an object with data
    // also, you probably will need a templating library or use 
    // bundled underscore _.template(html, data) method to render blocks of html
    // for example, with underscore 
    this.$el.html(this.template(this.model.toJSON()));
    return this; // for chaining
  },
});

var myModel = new MyModel();
var myView = new MyView({
  model: myModel,
});

myModel.set('test', 'newValue'); // view should render after this call

在backbonejs.org检查内置事件列表。

JS框架如何将模型绑定到视图？

1 个答案: