从json-backbone.js获取模型

早上好， 我有一个简单的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和Handelbar合作

---

非常感谢您的帮助

您必须获取您的模型：

$(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

覆盖以前设置的模型，因此当执行

初始化
和
渲染
时，您的新模型
this.headerModel
为空。
太好了！它起作用了！所以我总是需要拿两次模型？在模型实例和app.js中？不，不是这样。我会在回答中详细解释。