Question

我有一个backbone.js应用程序，其中我有三个视图（其中两个是子视图）

我在这里放了一个简化版的应用程序：

问题是如果我创建了一个产品（默认为Book子视图），并输入“A Good Book”，然后单击“添加产品”，则清除“A Good Book”。如何修复此问题，以便在添加其他产品时保存“好书”？

我对产品手册，杂志和视频的子视图如下：

var ProductBookView = Backbone.View.extend({
     render: function () {
          this.$el.html( $("#product_book_template").html() );
     }
});

var ProductVideoView = Backbone.View.extend({
     render: function () {
          this.$el.html( $("#product_video_template").html() );
     }
});

var ProductMagazineView = Backbone.View.extend({
     render: function () {
          this.$el.html( $("#product_magazine_template").html() );
     }
});

Answer 1

我已经分叉你的jsfiddle并更新了它。这是工作jsfiddle。

问题出在本声明中：

var productBookView = new ProductBookView({
    el: $('.product-view')
});

您需要使用以下命令进行更新：

var productBookView = new ProductBookView({
    el: $('.product-view:last')
});

原因是，el的{{1}}元素应该是ProductBookView。在您提供的代码中.product-view分配了DOM中存在的所有el元素，这些元素具有按名称div分类的内容。因此，每次添加新产品时，所有具有类名product-view的div元素都会使用product-view html进行更新。因此输入框被清除。

Answer 2

你必须使用模板..

      ...
...
        my_template: _.template($("#store_template").html()),
    initialize: function() {
        this.render();
    },

    events: {
        "click #addProduct": "addProduct"
    },

    render: function() {
        this.$el.html( this.my_template() );
    },
....
..

输入结算问题

2 个答案: