Question

我有一个像

这样的模板

script type: "text/template", id: "list-template", '''    
    <div class="display">
        <div id="list-name"><%= name %></div>        
        <span class="list-destroy"></span>
    </div>
    <div>
        <ul id="ul-cards">

       </ul>
    </div>
    <div class="edit">
          <input class="list-input" type="text" value="<%= name %>" />
          <input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
          <input id="hdnListId" type="hidden" value="<%= listId%>" />
    </div>
    <form class="add-list-card js-add-list-card clearfix"> 
        <textarea placeholder="Add card" class="new-card"></textarea> 
        <input type="button" value="Add" class="primary js-add-card"> 
        <a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a> 
    </form>
'''

在这个模板中，我有<ul id="ul-cards">元素，我想在其中呈现另一个模板，该模板在此ul中显示列表。这个模板是：

script type: "text/template", id: "card-template", '''    
    <div>
        <span class="card-name"><%= name %></span>
    </div>
'''

是否有可能或我必须以另一种方式做到这一点？如果有人有想法，请帮助我。谢谢你的推荐。

它工作但我在数据显示中仍有一个问题根据我的数据库中的记录，<ul id="ul-cards">有sholud be 2

，但它只会显示1

。数据正确获取但仅显示最后数据。

Answer 1

有两种方法可以做到这一点：DOM方式和模板方式。

DOM方式涉及使用DOM方法添加视图：您拥有ListView和CardView; ListView调用填充ListView元素的各个CardView。

模板方式要求您记住：骨干的视图是策略框架，而不是策略模板。渲染不必将渲染到DOM 中。例如，您可以使用render()返回字符串。如果您的事件管理器仅在ListView对象上（可能;我已完成此操作），那么您可以让ListView调用“由CardView呈现数组生成的数组”并将其直接插入到ListView的模板中。这实际上更快，因为您只需要浏览器分析整个ListView HTML blob一次，当它插入到父DOM对象的innerHTML中时。

backbone.js中的嵌套模板渲染

1 个答案: