Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将模型数据获取到view backbone.js_Backbone.js_Models_Backbone Views - Fatal编程技术网

将模型数据获取到view backbone.js

将模型数据获取到view backbone.js,backbone.js,models,backbone-views,Backbone.js,Models,Backbone Views,我试图理解模型和视图之间的关系。我已经尝试构建一个模型和视图来渲染该模型 我得到错误无法调用未定义的方法“toJSON”,我理解为模型的实际实例没有被发送到视图 我觉得视图的初始化中缺少了一些东西 模型: var sticky = Backbone.Model.extend({ defaults: { title:"", content:"", created: new Date() }, initialize: function() { console.l

我试图理解模型和视图之间的关系。我已经尝试构建一个模型和视图来渲染该模型

我得到错误
无法调用未定义的方法“toJSON”
,我理解为模型的实际实例没有被发送到视图

我觉得视图的初始化中缺少了一些东西

模型:

var sticky = Backbone.Model.extend({

defaults: {
    title:"",
    content:"",
    created: new Date()

},

initialize: function() {
    console.log("sticky created!");

}

}); 
观点:

var stickyView = Backbone.View.extend({

tagName:"div",
className:"sticky-container",

initialize: function() {
    this.render();
    console.log("stickyView created!");
},

render: function() {
    $("#content-view").prepend(this.el);
    var data = this.model.toJSON(); // Error: Cannot call method 'toJSON' of undefined 
    console.log(data);
    var source = $("#sticky-template").html();
    var template = Handlebars.compile(source);
    $(this.el).html(template(data));
    return this;
}

});
创建视图的新模型和新实例:

var Sticky = new sticky({title:"test"});

var StickyView = new stickyView();

您必须将模型实例传递给视图:

构造函数/初始化新视图([选项])
有几个特殊选项,如果通过,将直接附加到 视图:模型、集合、el、id、类名、标记名和 属性

这意味着您将像这样创建视图

var StickyView = new stickyView({model: Sticky});
同时,您可以传递编译后的模板和希望设置为视图元素的DOM节点(并从视图定义中删除
标记名
类名
),以避免严格耦合:

var stickyView = Backbone.View.extend({

    initialize: function(opts) {
        this.template = opts.template;
        this.render();
        console.log("stickyView created!");
    },

    render: function() {
        var data = this.model.toJSON();
        console.log(data);

        this.$el.html(this.template(data));

        return this;
    }

});

var StickyView = new stickyView({
    model: Sticky, 
    el: '#content-view',
    template: Handlebars.compile($("#sticky-template").html())
});