backbone.js : 현재 항목 바로 다음에 항목을 추가하십시오.

Question

백본으로 송장 행 목록을 만들려고하는데 버튼/이벤트 중 하나는 기존 행에서 "추가"를 클릭하면 추가됩니다. "추가"버튼 바로 아래에있는 새로운 행이 클릭되었습니다.

먼저 InvoiceItemView 또는 InvoiceItemListView에서이 이벤트를 처리해야하는지 잘 모르겠습니다. 둘째, 어떻게해야할지 모르겠습니다. 아무도 나를 도울 수 있습니까? 당신의 새로운 InvoiceItemView을 만들 경우 this.model.toJSON is not a function

Answer 1

문제는 다음과 같습니다

$(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; 

}); 

하지만 오류가 점점 오전 :

나는이 시도. InvoiceItem의 새 인스턴스를 만들어야합니다.

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