Rerender when data is added to local storage Backbone.js - backbone.js

Question

I want to rerender my UserList when data is added to localstorage,
because i'm writing chat for two tabs, and when in one tab I add user i want another tab to show them in list as well. UpdateUser is reposnible for fetching data from localstorage to userlist, and then when userlist changes it calls function AddAll(), but it is not working :(
<script type="text/javascript">
'use strict';
var app = {};
app.User = Backbone.Model.extend({
defaults: {
name: '',
status: ''
}
});
app.UserList = Backbone.Collection.extend({
model: app.User,
localStorage: new Store("people"),
});
app.userList = new app.UserList();
app.UserView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
});
app.AppView = Marionette.View.extend({
el: '#chatapp',
initialize: function () {
app.userList.on('add', this.addAll, this);
app.userList.on('reset', this.addAll, this);
app.userList.on('change', this.addAll, this);
this.updateMessages();
this.createUser();
},
updateMessages:function(){
setInterval(function(){
app.userList.fetch();
}, 1000);
},
createUser: function(){
app.userList.create(this.newAttributes());
},
addOne: function(user){
var view = new app.UserView({model: user});
$('#user-list').append(view.render().el);
},
addAll: function(){
this.$('#user-list').html('');
app.userList.each(this.addOne, this);
},
newAttributes: function(){
return {
name: prompt('What is your name?', 'name'),
status: prompt('What is your status?', 'status')
}
}
});
app.appView = new app.AppView();
</script>

Answer 1

You haven't said what you are using for "Store" that is providing your localStorage based sync, so it is hard to provide an exact code sample. However, if you add these additional lines to your #initialize method:
var model = this;
$(window).bind('storage', function (e) {
model.fetch();
});
This will cause the model to reload from localStorage whenever localStorage changes. You could improve this by checking e.originalEvent.key and only reacting to changes in localStorage for that model. A storage event is fired on every window/tab except for the one that updated the localStorage object and caused the event, and only when a change is made to localStorage, so you don't need to worry about suppressing changes to localStorage when the model saves itself.