最新のモデルを表示していないバックボーン部分図

Question

私はバックボーンが比較的新しく、この問題を抱えています。これは、以下の私の部分であるindex.dust

<div id="parentView"> 
    <div class="section"> 
    {>"app/inc/responseMessage" /} 
    <div class="userDetails"> 
     {! A button to get user details !} 
    </div> 
    </div> 
</div> 

- -

私はDustJSとバックボーンを使用していますが

マイテンプレートは、次のようになりますresponseMessage.dust私のJSがこの

ようになります

<div id="responseMessage"> 
    {@eq key="{data.success}" value="true"} 
    <div class="alert alert-success success" role="alert">success</div> 
    {/eq} 
</div> 

initialize: function() { 
    this.responseMessageView = this.responseMessageView || 
     new ResponseMessageView({ 
      model: new Backbone.Model() 
     }); // View is for the partial 
    this.model = this.model || new Backbone.Model(); //View for the whole page 
}, 

以下の関数は、イベントが発生したときに呼び出され、POSTを実行して正常に戻ります。コールバック関数

exports.sendEmail = function sendEmail(req, res){ 
    req.model.data.success = true; 
    responseRender.handleResponse(null, req, res); 
}; 

this.modelの

primaryViewEventTrigger: function(event){ 
    //Button click on `index.dust` triggers this event and does a POST event to the backend 

    this.listenToOnce(this.model, 'sync', this.primaryViewSuccess);//this will render the whole view. 
    this.listenToOnce(this.model, 'error', this.primaryViewError); 
    this.model.save({data: {x:'123'}}); 
} 

responseViewEventTrigger: function(event){ 
    //Button click on `responseMessage.dust` triggers this event and does a POST event to the backend 

    this.listenToOnce(this.responseMessageView.model, 'sync', this.responseViewSuccess);//it should only render the partial view - responseMessage.dust 
    this.listenToOnce(this.responseMessageView.model, 'error', this.primaryViewError); 
    this.responseMessageView.model.save({data: {x:'123'}}); 
} 
primaryViewSuccess: function(model,response){ 
    this.model.set('data', response.data); 
    this.render(); 
} 
responseViewSuccess: function(model,response){ 
    this.responseMessageView.model.set('data', response.data); 
    console.log(this.responseMessageView.model); 
    this.responseMessageView.render(); // Does not work in some cases 
} 

私の実装では、ページ全体のモデルに属しています。一方、部分的なモデルはthis.responseMessageView.modelです。

質問：ほとんどの場合、これは完全に正常に機能します。部分モデルを最新のモデル値でレンダリングしないケースが1つあります。ボタンをクリックすると、index.dustとprimaryViewSuccessが実行されます。その後、別のボタンをクリックしてresponseViewEventTriggerをトリガーします。それは正常にPOSTを行い、responseViewSuccessに来て、それもモデルに格納します。しかし、それはフロントエンドには表示されません。 data.successは依然として真ではありませんが、console.log(this.responseMessageView.model)はそれを示しています。attributes->data->success = true

しかし、私がページをリフレッシュすると同じ動作がすべて完璧です。そのちょうどprimaryViewSuccessが呼び出されたときにresponseViewSuccessが呼び出されたときに最新のモデルの変更が反映されません。 つまり、モデルは更新されていますが、DOMは同じままです。

私はここで何が欠けていますか？御時間ありがとうございます！

Answer 1

あなたは、インデックスビューをレンダリングするときに、すべてのDOMノードのを置き換えます。これには、responseMessageViewインスタンスが関連付けられているDOMノードが含まれます。 responseMessageView.elを調べると、実際に新しいモデルデータで更新されていることがわかりますが、要素はインデックスのDOMツリーにはもう接続されません。

ここ

var Parent = Backbone.View.extend({ 
    template: _.template(''), 
    render: function() { 
    this.$el.html(this.template()); 
    }, 

    initialize: function() { 
    this.render(); 
    this.child = new Child(); 
    this.$el.append(child.el); 
    } 
}); 

手動でのレンダリングを呼び出し、child.elは、もはや（あなたはインスペクタを使用して確認できます） parent.elになることはありません。

ここで最も簡単な修正は、新しくレンダリングされたdiv#responseMessage要素を持つ親レンダリングの後にchild.setElementを呼び出すことです。より良い修正は、事前にresponseMessageViewの要素を切り離し、そして後に再接続することです。

var Parent = Backbone.View.extend({ 
    render: function() { 
    this.responseMessageView.$el.detach(); 
    this.$el.html(this.template(this.model.toJSON())); 
    this.$el.find('#responseMessage').replaceWith(this.responseMessageView.el); 
    } 
}); 

Answer 2

てみ成功コールバックを使用して、私はあなたの問題はここから来るかもしれないと思う知らせる：

this.model.save（{ATT1： "値"}、{成功：handler1、エラー：handler2}） ;

また、listenToOnceを使用しますか？ listenToの代わりに??

Answer 3

this.delegateEvents()レンダリング（http://backbonejs.org/#View-delegateEvents）後にお試しください。