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

-2

我最近一直在潜入可怕的东西.. :)可怕的东西是流行js frameworks像backbone.js, angular.js,vue.js等等的来源等。JS框架如何将模型绑定到视图？

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

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

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

2016-02-25 Such Much Code

首先正确地阅读文档...它说什么骨干神奇地将模型数据与视图绑定..？骨干不绑定模型进行查看。用户可以自由选择如何为他的项目执行此操作。因此在主干源中没有这样的代码。 –

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

最小模型=>查看流程的例子是像

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入住内置事件的列表。

来源

2016-02-26 09:01:08

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

回答

相关问题