Backbone.js 将数据添加到本地存储主干时重新加载。js

当数据添加到localstorage时，我想重新命名我的用户列表， 因为我正在为两个选项卡编写聊天，当在一个选项卡中添加用户时，我希望另一个选项卡也在列表中显示它们。UpdateUser可用于将数据从localstorage提取到userlist，然后在userlist发生更改时调用函数AddAll（），但它不起作用：(

"严格使用",；
var-app={}；
app.User=Backbone.Model.extend({
默认值：{
名称：“”，
状态：“”
}
});
app.UserList=Backbone.Collection.extend({
型号：app.User，
localStorage：新商店（“人员”），
});
app.userList=新建app.userList（）；
app.UserView=Backbone.View.extend({
标记名：“li”，
模板：35;.template（$（'#项模板'）.html（）），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
初始化：函数（）{
this.model.on（'change'，this.render，this）；
this.model.on（'destroy'，this.remove，this）；
},
});
app.AppView=marionete.View.extend({
el:“#chatapp”，
初始化：函数（）{
app.userList.on（'add'，this.addAll，this））；
app.userList.on（'reset'，this.addAll，this））；
app.userList.on（'change'，this.addAll，this））；
this.updateMessages（）；
这个.createUser（）；
},
updateMessages:function（）{
setInterval（函数（）{
app.userList.fetch（）；
}, 1000);
},
createUser:function（）{
创建（this.newAttributes（））；
},
addOne：函数（用户）{
var view=new app.UserView（{model:user}）；
$（'#用户列表'）.append（view.render（）.el）；
},
addAll:function（）{
这个.$（'#用户列表'）.html（''）；
app.userList.each（this.addOne，this）；
},
newAttributes:function（）{
返回{
name:prompt（‘你叫什么名字？’，‘名字’），
状态：提示（“您的状态是什么？”，“状态”）
}
}
});
app.appView=新建app.appView（）；

您还没有说明为提供基于本地存储的同步的“存储”使用的是什么，因此很难提供准确的代码示例。但是，如果您在@initialize方法中添加以下行：

var model = this;

$(window).bind('storage', function (e) {
    model.fetch(); 
});

这将导致在localStorage发生更改时从localStorage重新加载模型。您可以通过检查e.originalEvent.key并仅对该模型的localStorage中的更改作出反应来改进这一点。存储事件将在每个窗口/选项卡上触发，但更新localStorage对象并引发事件的窗口/选项卡除外，并且仅当发生更改时才会触发是为localStorage创建的，因此您无需担心在模型保存自身时抑制对localStorage的更改

var model = this;

$(window).bind('storage', function (e) {
    model.fetch(); 
});