получение данных модели в представление backbone.js

Я пытаюсь понять связь между моделью и представлением. Я попытался построить модель и представление для визуализации этой модели.

Я получаю сообщение об ошибке Cannot call method 'toJSON' of undefined, которое я понимаю, поскольку фактический экземпляр модели не отправляется в представление.

Я чувствую, что в инициализации представления чего-то не хватает?

Модель:

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

backbone.js models backbone-views
person salmoally    schedule 11.05.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы должны передать экземпляр модели в представление, Backbone сделает все остальное:

конструктор/инициализация new View([options])
Существует несколько специальных опций, которые при передаче будут присоединены непосредственно к представлению: model, collection, el, id, className, tagName и атрибуты.

что означает, что вы должны создать свое представление, подобное этому

var StickyView = new stickyView({model: Sticky});

И пока вы это делаете, вы можете передать свой скомпилированный шаблон и узел DOM, который вы хотите установить в качестве элемента представления (и удалить tagName и className из вашего определения представления), чтобы избежать строгой связи:

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())
});
person nikoshr    schedule 11.05.2013