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

但是当我只需要更新输入和日期时间选择器值时，重新渲染整个模板并不好。所以我需要做类似下面的事情，它应该单独更新值。

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

然后使用集合创建/更新项目列表。

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

1 个答案: