Handlebars - обновить шаблон без повторной рендеринга DOM

Question

Вот интересная проблема. У меня такой шаблон.

<script id="temp" type="text/x-handlebars-template"> 
    <div class="entry"> 
     <label>Label 1 <input type="text" value="{{val1}}"/></label> 
    </div> 
    <div class="entry"> 
     <label>Label 2 <input type="text" value="{{val2}}"/></label> 
    </div> 
    <div class="entry"> 
     <label>Label 3 <input type="text" value="{{val3}}"/></label> 
    </div> 
    <div class="entry"> 
     <label>Label 4 <input type="text" value="{{val4}}"/></label> 
    </div> 
    <div class="entry"> 
     <label>Label 5 <input type="text" value="{{val5}}"/></label> 
    </div> 
    <div class="entry"> 
     <label>Label 6 <input type="text" value="{{val6}}"/></label> 
    </div> 
    .... 
    .... </script> 

Мой шаблон довольно большой. Как я показал выше, у него много ресурсов, и я включил почти 10 bootstrap datetimepicker в свой шаблон. В первый раз нормально компилировать и добавлять dom, как это.

var t = Handlebars.compile($('#temp').html()); 
$('body').append(t(values); 

, но это не хорошо, чтобы вновь сделать весь этот шаблон, когда мне нужно обновить только входной и DateTime сборщиков значение. Поэтому мне нужно сделать что-то вроде ниже, которое должно обновлять значения в одиночку.

t (valueChanged);
OR
t ('refresh', valueChanged);

Есть ли способ сделать это? Этот jsFiddle может вам помочь.

Answer 1

Вам нужен шаблон:

<script type="text/template" id="list-item"> 
    <label> <%= data.label %> <input type="text" value="<%= data.val %>"/></label> 
</script> 

Затем используйте вид магистральную так:

var app = app || {}; 

    // Item View 
    // -------------- 
    app.ItemView = Backbone.View.extend({ 

    tagName: 'div', 
    className: 'entry', 

    template: _.template($('#list-item').html()), 

    initialize: function() { 
     this.listenTo(this.model, 'change', this.render); 
     this.listenTo(this.model, 'destroy', this.remove); 
    }, 
    render: function() { 
     this.$el.html(this.template({data : this.model.attributes})); 
     return this; 
    }, 

    clear: function() { 
     this.model.destroy(); 
    } 
    }); 

Затем используйте коллекцию для создания/обновления списка элементов.