把手 - 更新模板而不重新渲染DOM

這是一個有趣的問題。我有這樣的模板。把手 - 更新模板而不重新渲染DOM

<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);

但是，當我只需要更新輸入和日期時間選取器值時，重新呈現整個模板並不好。所以我需要做一些像下面這樣的事情，它應該單獨更新值。

t（valueChanged）;
或
t（'refresh'，valueChanged）;

有沒有辦法做到這一點？這jsFiddle可能會幫助你。

來源

2013-08-23 user10

你是否考慮用CollectionView替換這個大模板？它似乎需要使用Marionette – ekeren

沒有的最小代碼。我還沒有使用過木偶。我來檢查一下。 – user10

是否有任何理由不能直接訪問DOM元素並手動修補？ –

你需要這樣的一個模板：

<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(); 
    } 
    });

然後用收集來創建/更新項目清單。

來源

2018-01-12 11:08:18 FlintOff

把手 - 更新模板而不重新渲染DOM

回答

相關問題