输入清除问题

Inputs clearing issue

本文关键字：问题 清除 输入      更新时间：2023-09-26

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

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

http://jsfiddle.net/GS58G/

问题是，如果我创建了一个产品（默认为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() );
     }
});

我已经分叉并更新了你的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_templatehtml。因此，输入框被清除。

您必须使用模板。。

      ...
...
        my_template: _.template($("#store_template").html()),
    initialize: function() {
        this.render();
    },
    events: {
        "click #addProduct": "addProduct"
    },
    render: function() {
        this.$el.html( this.my_template() );
    },
....
..
相关文章：