Backbone View渲染功能中的Ajax请求

Question

我想在渲染骨干视图之前传递一个额外的变量(userid).我正在使用ajax请求获取额外变量,但因为是异步的,我认为我的页面在获取变量之前正在呈现.为简单起见,我想在骨干视图中有这个:

PostsApp.Views.Post = Backbone.View.extend({
    template: _.template($('#post-template').html()),

    render: function(){
        var newObject = this.model.toJSON();
        $.ajax({
            url:"/user",
            success:function(result){
                newObject.twittername = result.name; ;
            }
        });
        this.$el.html(this.template(newObject));
    }

});

我想我可以把它.$ el.html(this.template(newObject)); 在回调中,但是"这意味着什么......有人能想到解决这个问题吗？

或者在渲染函数中发送这样的请求是完全非常糟糕的.

Answer 1

你的假设是正确的.它无法正确呈现.

简单的修复

就像更一般的情况一样,您可以在success回调中执行实际渲染.

 render: function(){
        var newObject = this.model.toJSON();
        var that = this; // to fix that `this` refers to in the callback
        $.ajax({
            url:"/user",
            success:function(result){
                newObject.twittername = result.name; ;
                that.$el.html(that.template(newObject));
            }
        });
    }

更好的解决方案

我要做的是:

• 将推特名称作为模型的一部分
• 从模型中获取它(甚至可能是一个宁静的 .fetch
• change在视图中监听事件,并在此类事件上调用渲染.

这是因为视图不应该负责更改Backbone中的模型数据.它将"业务逻辑"与演示混合在一起,它可以很快变得丑陋.

[我认为Addy Osmani的"Backbone Fundamentals"中的这个例子2应该让你对这种结构的布局有一个大概的了解.