0

私は1週間前にバックボーンの作業を始めたばかりですが、この質問がばかげていてもかまいません。了解しました。これが私がやろうとしていることです。

ItemというモデルとItemsというコレクションがあります。2つのビューがあり、1つはアイテムを追加するためのもので、もう1つはアイテムをリストするためのものです。私が抱えている問題は、アイテムを保存しようとしたときに、初めて正しく保存されることです。次回新しいアイテムを追加すると、アイテムは正常に作成されますが、前に追加されたアイテムも新しいアイテムの属性で更新されます。これは、追加されるすべての連続するアイテムに発生します。

コレクション内のすべてのモデルが更新されているか、独自の保存メソッドが必要だと思います。私は実際に自分が間違っていることを理解することができません。コレクション内のすべてのモデルではなく、問題のモデルをビューとともに保存したいだけです。いくつかのポインタを本当にいただければ幸いです。

デモへのリンク。

アイテムの追加/編集ビュー

define([
  'jquery',
  'use!underscore',
  'use!backbone',
  'mustache',
  'models/item',
  'views/bootstrap',
  'text!templates/items/edit.mustache',
  'text!templates/items/new.mustache',
  'handlebars',
  'bootstrap'

], function($, _, Backbone, Mustache, Item, Bootstrap, editTemplate, newTemplate, Handlebars){

  var app = new Backbone.Router

  var ItemEditView = Backbone.View.extend({

    el: $('#page'),

    events: {
      'submit #new-item': 'saveItem',
      'click .cancel': 'cancelItem'
    },

    initialize: function(options){
      if (!this.model.isNew()) {
        this.model.bind('change', this.render, this)
        this.model.fetch()
      }
    },

    render: function(){
      var item = this.model.attributes
      var template = this.model.isNew() ? newTemplate : editTemplate
      var compiledTemplate = Mustache.render(template, item )
      $(this.el).html(compiledTemplate)
      if (this.model.isNew()) $('#itemName').focus()
      return this
    },


    /*
     *  Event actions
     */

    saveItem: function(e) {
      e.preventDefault()

      var item = {
        name: $('#itemName').val(),
        price: $('#itemPrice').val()
      }
      var self = this
      this.model.save(item, {
        success: function (model, response) {
          app.navigate('items/'+model.id, {trigger: true, replace: true})
        },
        error: function (model, response) {
          new Bootstrap.alert({ el: $('#page') }).render(response, 'error')
        }
      })
    },

    cancelItem: function (e) {
      if (this.model.isNew())
        app.navigate('items', {trigger: true, replace: true})
      else
        app.navigate('items/'+this.model.id, {trigger: true, replace: true})
    }

  })

  return ItemEditView
})

アイテムモデル

define([
  'use!underscore',
  'use!backbone'
], function(_, Backbone) {
  var Item = Backbone.Model.extend({

    urlRoot: 'api/items',

    idAttribute: '_id'

  });

  return Item;
});

アイテムコレクション

define([
  'jquery',
  'use!underscore',
  'use!backbone',
  'models/item'
], function($, _, Backbone, Item){
  var Items = Backbone.Collection.extend({

    model: Item,

    url: 'api/items/'

  });

  return Items;
});

ソースコードへのリンク（場合）

4

1 に答える 1

2

フォームの使用が終了したら、フォームが送信またはキャンセルされた場合は、ItemView.remove（）を呼び出すか、少なくともイベントの委任を解除して、ビューを破棄するか、ビューを破棄する必要があります。

saveItem: function(e) {
  e.preventDefault()

  var item = {
    name: $('#itemName').val(),
    price: $('#itemPrice').val()
  }
  var self = this
  this.model.save(item, {
    success: function (model, response) {
      app.navigate('items/'+model.id, {trigger: true, replace: true})
    },
    error: function (model, response) {
      new Bootstrap.alert({ el: $('#page') }).render(response, 'error')
    }
  })
  this.remove(); // undelegate events for later views.
},

cancelItem: function (e) {
  if (this.model.isNew())
    app.navigate('items', {trigger: true, replace: true})
  else
    app.navigate('items/'+this.model.id, {trigger: true, replace: true});
  this.remove(); // undelegate events for later views.
}

イベントは#pageに委任され、新しいビューを作成した後に古いビューが存在するため、それらの保存メソッドとキャンセルメソッドは、削除されるまでトリガーされます。

于 2012-04-12T07:02:33.913 に答える