backbone.js：現在のアイテムのすぐ後ろにコレクションを追加する

Question

バックボーンを使用した請求書の行リストを作成しようとしていますが、ボタン/イベントの1つは、既存の行の「追加」をクリックすると、 「追加」ボタンのすぐ下の新しい行がクリックされました。

最初に、このイベントをInvoiceItemViewまたはInvoiceItemListViewで処理する必要があるかどうかは不明です。第2に、これを行う方法がわかりません。誰か助けてくれますか？

私はこの試みた：

$(function(){ 

// Invoice row 
var InvoiceItem = Backbone.Model.extend({ 

    // Set default values 
    defaults : { 
     name: "", 
     quantity: 1, 
     price: "", 
     total: "" 
    }, 

    // Ensure each item has at least a quantity of one 
    initialize: function() { 
     this.set({ "quantity" : this.defaults.quantity }); 
    }, 

    // Delete item (row) from invoice 
    clear: function() { 
     this.destroy(); 
    }   

}); 

// Collection of Invoice Items (rows) 
var InvoiceItemList = Backbone.Collection.extend({ 

    // Colelction's model 
    model: InvoiceItem, 

    // Use localStorage to save data 
    localStorage: new Store("invoices-backbone"), 

    // Calculate invoice totals 
    calculate_totals: function() { 
     alert('arvutus'); 
    }, 

    // Generate next item order number 
    nextOrder: function() { 
     if (!this.length) return 1; 
     return this.last().get('order') + 1; 
    } 

}); 

// Create a global colelction of Invoice Rows 
var InvoiceItems = new InvoiceItemList; 

// Invoice Item View 
var InvoiceItemView = Backbone.View.extend({ 

    // it's a tr tag 
    tagName: 'tr', 

    // Cache the template 
    template: _.template($('#invoiceitem-template').html()), 

    events: { 
     "click .remove"  : "clear", 
     "click .add"  : "addAfter" 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'addAfter', 'remove'); 
     this.model.bind('change', this.render); 
     this.model.bind('destroy', this.remove); 
     this.render(); 
    }, 

    // Render the contents 
    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
     $(this.el).attr('id', 'item-' + this.model.get('order')); 
     return this; 
    }, 

    // Remove and destroy the item 
    clear: function() { 
     this.model.clear(); 
    }, 

    // Add new item 
    addAfter: function(ItemId) { 
     var view = new InvoiceItemView({model: InvoiceItem}); 
     this.$("tbody tr#item"+ItemId).after(view.render().el); 
    } 

}); 

// Invoice Item List View 
InvoiceItemListView = Backbone.View.extend({ 

    // Bind to existing DOM element 
    el: $("#items"), 

    // Template for displaying totals 
    totalsTemplate: _.template($('#totals-template').html()), 

    // Kick-off (load from localStorage as well) 
    initialize: function() { 
     _.bindAll(this, 'addOne', 'render'); 

     InvoiceItems.bind('add', this.addOne); 

     InvoiceItems.fetch(); 

     InvoiceItems.create(this.newAttributes()); 
     InvoiceItems.create(this.newAttributes()); 
     InvoiceItems.create(this.newAttributes()); 

     this.render(); 
    }, 

    // Re-render the totals 
    render: function() { 
     this.$('#totals').html(this.totalsTemplate({ 
      total: this.total 
     })); 
    }, 

    // Generate the attributes for a new Invoice Item. 
    newAttributes: function() { 
     return { 
      name: '', 
      price: '', 
      total: '', 
      order: InvoiceItems.nextOrder() 
     }; 
    }, 

    // Add a single invoice item to the list 
    addOne: function(InvoiceItem) { 
     var view = new InvoiceItemView({model: InvoiceItem}); 
     this.$("tbody").append(view.render().el); 
    } 

}); 

var iView = new InvoiceItemListView; 

}); 

をしかし、私はエラーを取得しています：this.model.toJSON is not a function

Answer 1

あなたの新しいInvoiceItemViewを作成するという問題があります。 InvoiceItemの新しいインスタンスを作成する必要があります

// Add new item 
addAfter: function(ItemId) { 
    var view = new InvoiceItemView({model: new InvoiceItem()}); 
    this.$("tbody tr#item"+ItemId).after(view.render().el); 
}