javascript - 在backbonejs中创建模板的副本

Question

我有以下主干 View ，它在我第一次加载 View 时工作正常，我希望能够渲染模板并在每次单击“添加”时将计数增加 1。目前，点击“添加”只是重新渲染模板，并增加计数。

 app.FactView = Backbone.View.extend({
    el: '#facts-container',

    model:app.FactModel,

    template: _.template($("#facts").html()),

    events: {
        'click #add': 'addBlock',
        'click #delete': 'deleteBlock'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        var data = { count : counter };            
        this.$el.html(this.template(data),this);                        
        renderEditor();
        counter++;
    },

    addBlock: function() {
        this.$el.html(this.template({ count: counter }),this);            
        renderEditor();
        counter++;
    },

    deleteBlock: function() {
        console.log('here');
    }

});

$(document).ready(function() {
    app.FactView = new app.FactView({});
});

有没有办法可以在已渲染的模板下添加新模板。

这是我的模板的样子

div.col-sm-12#facts-container  
      script(type="text/template" id="facts")         
         div.col-sm-8.col-sm-offset-1
            form.form-horizontal
              div.form-group
                  label.form-label.col-sm-2  Fact <%= count %>
                  div.col-sm-10  
                    input.form-control.fact(type='text',name='fact',placeholder='Fact') 
              div.form-group                  
                div.col-sm-12.summernote                  
          div.form-group
           div.col-sm-4
           div.col-sm-6.btn-group
               button.col-sm-4.btn.btn-warning#add 
                  | Add Another Fact
               button.col-sm-4.btn.btn-danger#delete 
                  | Delete Last Fact
               button.col-sm-4.btn.btn-success#next
                  | Next

Answer 1

您可能会考虑将 counter 添加到 FactModel 并利用 Backbone 的模型事件:

// ...

initialize: function () {
    this.listenTo(this.model, "change:count", this.render);
    this.render();
},

addBlock: function () {
    this.model.set({
        count: this.model.get('count') + 1
    })
}

// ....

Fiddle