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 和 returns。

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 是部分模型。

问题：这在大多数情况下工作得很好。在一种情况下，它不使用最新的模型值渲染部分。当我单击 index.dust 上的按钮并执行 primaryViewSuccess 时。然后我点击另一个按钮并触发 responseViewEventTrigger。它成功地完成了 POST 并且达到了 responseViewSuccess 并将其也存储在模型中。但它不会在前端显示它。 data.success 仍然不正确，而 console.log(this.responseMessageView.model) 表明 attributes->data->success = true

但是当我刷新页面时同样的行为一切正常。只是当 primaryViewSuccess 被调用然后 responseViewSuccess 它没有采用最新的模型更改。 换句话说，模型正在更新，但 DOM 保持不变。

我在这里错过了什么？感谢您的宝贵时间！

Answer 1

尝试使用成功回调让我知道我认为你的问题可能来自这里：

this.model.save( {att1 : "value"}, {成功 :handler1, 错误: handler2});

另外你确定要使用 listenToOnce 吗？而不是 listenTo ??

Answer 2

在渲染后尝试 this.delegateEvents() (http://backbonejs.org/#View-delegateEvents)。

Answer 3

您遇到了经典的 Backbone 带子视图渲染陷阱：当您渲染索引视图时，您正在替换 [=28= 的 all ] 节点。这包括您的 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);
  }
});

Backbone 部分视图未呈现最新模型

Backbone partial view not rendering the latest model

javascript

jquery

backbone.js

backbone-views