Question

我试图在骨干网中设置一个小应用程序，我可以将项目添加到列表中，当我点击它们时，它们将被删除。我设法将项目添加到列表中但是在使用model.destroy（）时没有任何反应。

当我在console.log中获得列表模型上的click事件：

child {cid：＆＃34; c0＆＃34;，attributes：Object，_changing：false，_previousAttributes：Object，changed：Object ...}

我点击的任何项目。

代码如下：

HTML：

<h1>INDEX!</h1>

<form class="add-form">
  <input type="text" name="name"/>
  <hr />
  <button type="submit" class="btn">Submit</button>
</form>

<h2>LIST STUFF</h2>

<ul class="blah">
{{#each indexCollection}}
  <li class="li-class">{{name}}</li>
{{/each}}
</ul>

使用Javascript：

//Local Storage
App.Storage.Local = new Backbone.LocalStorage('localIndexList1-backbone');


//Index Model
App.Models.IndexModel = Backbone.Model.extend({
  localStorage: App.Storage.Local,
  defualts:{
    name:''
  },
  urlRoot: '/'
});

//Index Collection
App.Collections.IndexCollection = Backbone.Collection.extend({
  localStorage: App.Storage.Local,
  model: App.Models.IndexModel,
  initialize: function(){
    console.log('Collection initialised');
  },
  url: '/'
});

//View for H1 and input form
App.Views.IndexView = Backbone.View.extend({
  el: '.page',
  events:{
    'submit .add-form' : 'addNew',
    'click' : 'deleteMe'
  },
  initialize: function(){
    console.log('IndexView initialised');
  },
  addNew: function(ev){
    // ev.preventDefault();
    var submitEntry = $(ev.currentTarget).serializeObject();
    var newEntry = new App.Models.IndexModel();
    newEntry.save(submitEntry, {
      success: function(newEntry){
        // router.navigate('', {trigger: true});
        console.log('SUCESSS!!!!!!!!!');
      }
    });
  },
  deleteMe: function(){
    console.log(this.model);
    //Whatever I put here will not work

  } 
});

//View for list
App.Views.ListView = Backbone.View.extend({
  el: '.page',
  initialize: function(){
    console.log('ListView initialised');
  },
  template: Handlebars.compile($('#list').html()),
  render: function(){
    this.$el.html(this.template);
    var that = this;
    var indexCollection = new App.Collections.IndexCollection();
    indexCollection.fetch({
      success:function(indexCollection){
        that.$el.html(that.template({indexCollection: indexCollection.toJSON()}));
      }
    });
  }
});

有人能帮我告诉我哪里出错吗？

谢谢！

Answer 1

您在哪里为每个收藏模型创建一个IndexView？您应该有一个项目视图，将其模型配置为一个IndexModel，并将删除代码移动到该特定视图。执行此操作时，您还应在此项目视图中调用remove。

这就是像Backbone.Marionette这样的东西有很多帮助的原因。只需投入一个CollectionView就可以了。

这样想：

＆＃34;列表视图＆＃34; - ＆GT;有一个集合
＆＃34;项目视图＆＃34; - ＆GT;有一个模型

您在集合级别需要的任何内容（如添加新内容，重新加载等），请在列表视图中执行此操作。您在模型级别上需要的任何内容（编辑，保存，删除），请在项目视图中执行此操作。

Backbone - 使用localstorage无法获得点击模型

1 个答案: