Question

使用backbone.js我正在尝试从我的服务器获取模型并基于此，渲染下划线模板。我首先尝试使用以下渲染函数而不使用api调用的结果：

render: function(options) {
    this.ticketId = options.ticketId;
    var that = this;
    var ticketModel = new TicketModel({'id': that.ticketId});
    $.when(ticketModel.fetch()).done(function(){
        console.log(ticketModel); // this outputs the correct model
    });
    var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId});
    this.$el.html(template);
},

这非常有效。所以我尝试使用api调用的结果来呈现模板：

render: function(options) {
    this.ticketId = options.ticketId;
    var that = this;
    var ticketModel = new TicketModel({'id': this.ticketId});
    $.when(ticketModel.fetch()).done(function(){
        console.log(ticketModel);
        console.log($('#tab-content-template').html());
        var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId});
        this.$el.html(template);
    });
},

但不幸的是，这会导致错误说

Uncaugt TypeError：无法读取undefined的属性'html'。

奇怪的是，它会在console.log($('#tab-content-template').html());中正确输出控制台中的html。我得到的错误是在this.$el.html(template);

行

首先如何才能获得html（），之后它说它无法找到属性html？我完全被困在这里..：S

欢迎所有提示！

Answer 1

您的问题是这不再是指您认为它所指的内容。在你的代码中放置了

var that = this;

这是一个常见的模式/技巧，允许闭包在执行时保留“this”的上下文。在你关闭的内部，“那个”现在指的是你认为“这个”应该引用的内容。

尝试将“this”更改为“that”

 $.when(ticketModel.fetch()).done(function(){
        console.log(ticketModel);
        console.log($('#tab-content-template').html());
        var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId});
        that.$el.html(template);
    });

我通常使用jQuery的代理函数来确保函数执行时可以确信它正在运行的上下文

 $.when(ticketModel.fetch()).done($.proxy(function(){
        console.log(ticketModel);
        console.log($('#tab-content-template').html());
        var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId});
        this.$el.html(template);
    },this));

哦，你的另一个问题是为什么是$（'tab-content-template'）。html（）工作，这是因为你正在使用全局命名空间中的JQuery，因此可以访问$ el所在的位置您视图的属性，如果您无法访问您的视图，则无法访问该属性。

Answer 2

请参阅http://backbonejs.org/#Model-fetch - 在options参数中，它接受success和error回调：

ticketModel.fetch({
    success: function(model, response, options) {
        // render the template
    }
});

此外，如果您需要在此回调中使用当前视图对象的上下文，则可以使用Underscore / Lo-Dash _.bind()函数来传递上下文：

ticketModel.fetch({
    success: _.bind(function(model, response, options) {
        // Render the template using some method of the view:
        this.renderMyTemplate(model);
    }, this)
});

或者只是传递方法本身：

ticketModel.fetch({
    success: this.renderMyTemplate,
    error: this.handleFetchError
});

Answer 3

你不需要一个$。当这里，骨干现在返回一个fetch for fetch。下面的代码应该适合你。还要考虑在渲染函数外编译模板。编译模板有点繁重的任务，一旦完成就应该缓存。

var _this = this;
ticketModel.fetch().done(function () {
    var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId});
    _this.$el.html(template);
});

myModel.fetch（）完成后渲染骨干模板？

3 个答案: