Backbone局部視圖無法渲染最新模型

Question

我對Backbone相對較新，我遇到了這個問題。

我正在使用Backbone和DustJS

我的模板看起來像這樣 - index.dust

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

這是我的部分 - responseMessage.dust

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

我的JS看起來像這樣

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並成功返回。

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
}

我的回調函數的實現

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

this.model屬於整個頁面的模型。 而this.responseMessageView.model是partial的模型。

問題：在大多數情況下，這種方法完全正常。 有一種情況是它不會使用最新的模型值渲染部分。 當我點擊index.dust上的按鈕並執行primaryViewSuccess 。 之后我點擊另一個按鈕並觸發responseViewEventTrigger 。 它成功完成POST，它來自responseViewSuccess並將其存儲在模型中。 但它沒有在前端顯示出來。 data.success仍然不正確，而console.log(this.responseMessageView.model)顯示attributes->data->success = true

但是當我刷新頁面時它的行為完全相同。 它只是在primaryViewSuccess然后responseViewSuccess它沒有采取最新的模型更改。 換句話說，模型正在更新，但DOM保持不變。

我在這里錯過了什么？ 謝謝你的時間！

Answer 1

您正在使用經典的Backbone render-with-subviews gotcha：當您渲染索引視圖時，您將替換所有 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);
  }
});

在這里手動調用render時， 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：“value”}，{success：handler1，error：handler2}）;

你還確定要使用listenToOnce嗎？ 而不是listenTo ??

Answer 3

在渲染后嘗試執行this.delegateEvents() （ http://backbonejs.org/#View-delegateEvents ）。