Question

早上好，我有一个简单的json文件，我需要获取我的数据（我已经阅读了数千个关于它的其他问题，但没有为我的应用程序找到一个好的解决方案）。我有一个视图，一个模型一个json文件。我可以获取我的数据，但我无法显示它们。这是我的代码：

calendarDetails.json

{
"calendarTitle": "WebCal",
"calendarDescription": "Hello, I'm your new calendar"
 }

HeaderModel.js

    var HeaderModel = Backbone.Model.extend({
    isEdit: false,
    url: '/assets/calendarDetail.json'
});

headerModel = new HeaderModel();
headerModel.fetch();

HeaderView.js

var HeaderView = Backbone.View.extend({
    template: HandlebarsTemplates["header"],
    model: headerModel,

    initialize: function(){
        this.render();
        this.model.on('change', this.render, this);
    },

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

app.js

$(function() {
    var CalendarApp = Backbone.View.extend({
        el: $('#wrap'),

        initialize: function(){
            this.headerModel = new HeaderModel();
            this.headerView = new HeaderView({
                model: this.headerModel,
                el: $('header')
            }),

            this.monthView = new MonthView({
                el: $("#calendarView")
            })
        }
    });

    var calendar = new CalendarApp;

});

我正在使用RubyonRails和Handelbars

真的很感谢任何帮助!!

Answer 1

您必须获取模型：

$(function() {
    var CalendarApp = Backbone.View.extend({
        el: $('#wrap'),

        initialize: function(){
            this.headerModel = new HeaderModel();
            this.headerView = new HeaderView({
                model: this.headerModel,
                el: $('header')
            }); // semicolon here

            this.headerModel.fetch(); // Here

            this.monthView = new MonthView({
                el: $("#calendarView")
            }); // semicolon here
        }
    });

    var calendar = new CalendarApp;

});

您的问题是，在HeaderModel.js中，您正在实例化模型并获取它，因此您的模型将填充您的json文件，就是这样。

在HeaderView.js您的模型对视图类产生影响的情况下，尚未调用视图initialize和render函数。

在实例化视图时app.js

this.headerView = new HeaderView({
    model: this.headerModel,
    el: $('header')
})

您将使用新的this.headerModel覆盖之前设置的模型，因此当执行initialize和render时，您的新模型this.headerModel为空。

从json获取模型 - backbone.js

1 个答案: