javascript - 输入清算问题

Question

我有一个backbone.js应用程序，其中有三个 View (其中两个是 subview )

我在这里放置了该应用程序的简化版本:

http://jsfiddle.net/GS58G/

问题是，如果我创建一个产品(默认为 Book subview )，并输入“一本好书”，然后单击“添加产品”，则“一本好书”为已清除。如何解决此问题，以便在添加其他产品时保存“一本好书”？

我对产品书籍、杂志和视频的 subview 如下所示:

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

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

问题在此声明中:

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

您需要更新它:

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

原因是，ProductBookView 的 el 元素应该位于最后一个.product-view。在您提供的代码中，el 被分配给 DOM 中存在的所有 div 元素，这些元素具有名为 product-view 的类。因此，每次添加新产品时，类名为 product-view 的所有 div 元素都会使用 product_book_template html 进行更新。因此输入框被清除。