javascript - backone-使用嵌套 View 保存到数据库

Question

所以本质上我在主干中创建了一个表。模型的行 View ，包含在表的 Collection View 和用户输入数据的表单中。每行有两个单元格#itemName 和#price。它们从#item 和#price 形式的文本字段接收数据。

我想将行列表保存到 Mongo 数据库中，以便当用户重新加载页面时，完整列表将保留在持久存储中。问题是我对应该在哪里以及如何编写保存语句感到困惑。我是告诉它执行 .save() 行 View 还是执行 .save() 完整 Collection View ？任何援助将不胜感激。我对此很陌生。

$(function() {
    var Item = Backbone.Model.extend({});

    //collections
    var Items = Backbone.Collection.extend({
        model: Item
    });

    // row view
    // the view of each item that will put on the collection view
    var ItemView = Backbone.View.extend({
        tagName: 'tr',
        initialize: function(){
         // this is the new item view within the row
            this.template = _.template('<td><%- itemName %></td>'
            +'<td><%- price %></td>'
            +'<td><button class="complete">Complete</button>'
            +'<button class="remove">Remove</button></td>');
        }, 
        render: function(){
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }

    });
    // collection views
    ItemsView = Backbone.View.extend({
        el: '.items', //table body
        initialize:function () {
        this.collection.on('add', this.addOne, this);       
        },
        render:function () {
            this.addAll();
            return this;
        },
        addOne: function(item){
                var itemView = new ItemView({model: item}); 
                // append all rendered item view to the collection view
               this.$el.append(itemView.render().el);
        },
        addAll: function(){
            this.collection.forEach(this.addOne, this);
        }
    });

    Form = Backbone.View.extend({ //form view
        el: '.item-form',
        initialize: function(){
        }, 
        events: {
            'click .add': 'addModel'
        },
        addModel: function(){
            var data = {
                name: this.$("#item").val(),
                price: this.$("#price").val()
        };
        // simple validation before adding to collection
        if(!_.isEmpty(data.name) && !_.isEmpty(data.price)){ 
            this.collection.add(data);
            this.$("#item").val('');// and empty these
            this.$("#price").val('');
        } else {
            alert('fill all fields'); 
        }
      }
    });

Answer 1

一种解决方案是在 Backbone Collection 中指定 url:

var Items = Backbone.Collection.extend({
    url: '/items',
    model: Item
});

然后，当您创建新的“项目”时，您可以使用指定数据的 Backbone 模型来创建它:

var item = new Item({
   name: this.$("#item").val(),
   price: this.$("#price").val()
});

然后将其添加到您的收藏中:

var items = new Items();
items.add(item);

完成此操作后，主干模型将从父集合中获取其 URL，因此当您保存时，您将添加到现有项目:

item.save();  // this will send the data as a POST request to /items, creating a new item

然后，如果您更新该模型，Backbone 将知道它已经存在并发送 PUT 请求:

item.set("name", "a new value");
item.save();  /// this will send the data as a PUT request to /items/:id, updating the item