Backbone View 渲染函数中的 Ajax 请求

Question

我想在渲染我的主干视图之前传递一个额外的变量（用户 ID）。我通过 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));
    }

});

我想我可以把 this.$el.html(this.template(newObject));在回调中，但“this”指的是别的东西。任何人都可以想到解决这个问题的方法吗？

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

Answer 1

你的假设是正确的。它不会正确渲染。

简单的修复

就像the more general case 一样，您可以在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));
            }
        });
    }

更好的修复

我要做的是：

• 将 twitter 名称作为模型的一部分
• 从模型中获取它（甚至可以使用宁静的.fetch
• 监听视图中的change事件，并在这些事件上调用render。

这是因为视图不应该负责更改 Backbone 中的模型数据。它将“业务逻辑”与表示混合在一起，很快就会变得丑陋。

[我认为 Addy Osmani 的“Backbone Fundamentals”中的这个示例 2 应该让您大致了解这种结构是如何布局的。