Question

所以我有这个困境，我有一个骨干视图，创建一个将附加到主视图的子视图。这些子视图中的每一个都必须进行ajax调用，该调用将检索数据以完成子视图。现在，超级视图调用每个子视图渲染并将其附加到自身。然后我拿主视图的元素并将其发布到服务器，问题是我将帖子发送到服务器后ajax完成。是否有更好的方法来使用异步调用来构建此工作？我有同步工作，但负载栏甚至没有显示。

所以这是一个例子：

WebView
generate:function(){
    var html = new MainView().render().el
    //ajax post to server with html
}

MainView 
    initalize:
    render:function(){
        this.el.append(new Subview().render().el);
    }

Subview
    initialize:
    render:fucntion(){
        //ajax - with  a success that alters the el
        return this;
    }

现在生成函数在我甚至可以从调用中获取数据之前完成，我无法绑定到任何东西，因为数据已经发送到服务器。

Answer 1

MainView
childViews = [];
renderCompletedChildViews = 0;
addChildView: function () {
   var subView = new SubView();
   this.childViews.push(subView);
   subView.on("renderComplete", postToServer, this);
}
render: function () {
   for( var i=0; i<this.childViews.length; i++ ) {
        this.childViews[i].render(this.el);
   }
}
postToServer: function () {
   this.renderCompletedChildViews++;
   if( this.renderCompletedChildViews == this.childViews.length) {
       // Interact with server
   }
}


SubView
render: function (el) {
   // Make an ajax call, on receiving data append the data to el passed by parent view and trigger "renderComplete" on current instance
}

这样，您就可以完全使用事件驱动和异步代码。

如何处理主干渲染和ajax调用

1 个答案: