Question

我正在尝试创建一个带有主干的发票行列表，其中一个按钮/事件是当您在现有行上单击“添加”时，它应该在“添加”按钮的正下方添加一个新行点击了。

首先，我不确定是否应该在InvoiceItemView或InvoiceItemListView中处理此事件，其次，我不知道如何执行此操作。有人能帮助我吗？

我试过了：

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

backbone.js：在当前项之后立即将项添加到集合中

1 个答案: