0

这是一个有趣的问题。我有这样的模板。

<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 个引导程序 datetimepicker 。第一次可以像这样编译和添加dom。

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

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

t(valueChanged);
或
t('刷新', valueChanged);

有没有办法做到这一点？这个jsFiddle可以帮助你。

4

1 回答 1

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

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

于 2018-01-12T11:08:18.740 回答