我对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>
我的 JavaScript 代码长这个样子
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
是部分的模型。
问题:在大多数情况下,这很好地运作。但有一种情况它不会用最新的模型值呈现部分视图。当我点击 index.dust
上的按钮并且执行了 primaryViewSuccess
后。之后我点击另一个按钮并触发 responseViewEventTrigger
。它成功地进行 POST,然后到达 responseViewSuccess
并将其存储在模型中。 但它不会在前端上显示。 data.success
仍然不为真,而 console.log(this.responseMessageView.model)
显示 attributes->data->success=true
但是当我刷新页面时,相同的行为都完美地工作。只是当将调用primaryViewSuccess
和responseViewSuccess
时,它没有采用最新的模型更改。换句话说,模型正在更新,但DOM保持不变。
我在这里缺少什么?感谢您的时间!
responseMessageView
,还是你希望在代码中引用的模型保持一致?你似乎在做this.model.set('data', response.data);
、this.responseMessageView.model.set('data', response.data);
等操作,看起来有些混乱...我们不知道第一个代码块中的 东西 是什么...我们也不知道第二个代码块中的 东西 是什么...你可能需要首先解释一下这些视图、模型之间的关系 - T Jthis.model.set('data', response.data);
...如果你使用相同的模型,那么保持两个视图同步会更容易。此外,您不必手动将response.data
设置到模型中。您可以从parse
方法返回response.data
,它将自动设置。 - T JprimaryViewSuccess
,另一个是responseViewSuccess
。它们各自拥有自己的模型和视图需要更新。现在,如果我触发responseViewSuccess
,它可以完美地工作。但是当我先触发primaryViewSuccess
,然后再触发responseViewSuccess
时,它就无法正常工作了。 - suprita shankar