Inputs clearing issue

Question

I have a backbone.js app where I have three views (two of them are subviews)

I put a simplified version of the app here:

http://jsfiddle.net/GS58G/

The problem is if I create a Product (which defaults to a Book subview), and enter in "A Good Book", then click "Add Product", the "A Good Book" is cleared. How do I fix this so it saves the "A Good Book" when you add another product?

My subviews for the product book, magazine, and video look like:

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

I've forked your jsfiddle and updated it. Here is the working jsfiddle.

Issue is in this statement:

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

You need to update it with:

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

Reason is, the el element of ProductBookView should be last .product-view. In the code provided by you el is assigned all div elements existing in the DOM having class by name product-view. Hence every time you add a new product, all div elements with class name product-view is updated with product_book_template html. Hence the input box gets cleared off.

Answer 2

you have to use template ..

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

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

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