Question

我正在开发我的第一个骨干应用程序，我有以下app.js代码：

https://gist.github.com/mikedevita/f26cb481385c5574001e

以及以下视图模板：

<button id="addZone" class="btn btn-success">Add Zone</button>
<script type="text/template" id="zone-template">
    <td><a href="#zone/<%= id %>">(<%= id %>) <%= name %></a></td>
    <td><a href="#zone/edit/<%= id %>" class="edit"><i class="icon-edit" title="Edit"></i></a> | <a href="#zone/destroy/<%= id%>" class="destroy"><i class="icon-trash" title="Delete"></i></a></td>
</script>
<script type="text/template" id="zoneEdit-template">
    <td>
        <form method="POST" class="form-inline" id="edit-form">
            <input type="text" name="name" value="<%= name %>" class="input-small">
            <input type="submit" class="btn btn-small btn-primary" title="Submit"><i class="icon-check"></i></input>
        </form>
    </td>
    <td><a href="#zone/destroy/<%= id%>" class="destroy"><i class="icon-trash" title="Delete"></i></a></td>
</script>

如何在编辑“区域”时渲染编辑模板，并在编辑完成时触发列表模板（默认）。

现在可以很好地在单击编辑图标时渲染编辑模板，但我无法弄清楚如何在模型的更改事件上触发列表模板。

我在c9帐户上有完整的应用设置： https://c9.io/gorelative/backbone-test

Answer 1

在审核完代码之后，事实证明这只是对函数的缺失调用。您在this.render回调中声明了model.change，而不是正确调用函数this.render();

App.Views.Zone = Backbone.View.extend({
  //...
initialize: function(){
  this.template = _.template( $('#zone-template').html() );
  this.model.on('change', function(){ 
    this.template = _.template( $('#zone-template').html() ); 
    this.render(); /* you were not calling  */
  }, this);
  this.model.on('destroy', this.remove, this);
},
//...
});

BackboneJs编辑与列表时单个视图的多个模板渲染

1 个答案: