将数据添加到本地存储时重新渲染 Backbone.js

Question

我想在数据添加到本地存储时重新呈现我的用户列表，因为我正在为两个选项卡编写聊天，当我在一个选项卡中添加用户时，我希望另一个选项卡也将它们显示在列表中。 UpdateUser 负责从本地存储中获取数据到用户列表，然后当用户列表更改时它调用函数 AddAll()，但它不工作:(

<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

您还没有说明 "Store" 使用什么来提供基于 localStorage 的同步，因此很难提供准确的代码示例。但是，如果您将这些额外的行添加到您的@initialize 方法中：

var model = this;

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

这将导致模型在 localStorage 更改时从 localStorage 重新加载。您可以通过检查 e.originalEvent.key 并仅对该模型的 localStorage 中的更改做出反应来改进这一点。每个 window/tab 都会触发一个存储事件，除了更新 localStorage 对象并导致该事件的事件，并且仅当对 localStorage 进行更改时才会触发，因此您无需担心在以下情况下抑制对 localStorage 的更改模型自救。

将数据添加到本地存储时重新渲染 Backbone.js

Rerender when data is added to local storage Backbone.js

backbone.js