Question

我有以下Backbone View，它在我第一次加载视图时工作正常，我希望能够渲染模板并在每次单击add时将计数增加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

Answer 2

而不是this.$el.html，请使用this.$el.append

如果你很幸运，那就是你需要改变的一切。否则，如果您在模板中寻找更多控制和更多功能，您将不得不变得更加花哨。为此，ToDoMVC for Backbone就是一个很好的例子。

在backbonejs中创建模板的副本

2 个答案: