node.js - backbone.js 中的嵌套模板渲染

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">根据我的数据库中的记录，应该有 2 个

，但它只会显示 1 个

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

Answer 1

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

DOM 方式涉及使用 DOM 方法添加 View :您有 ListView 和 CardView； ListView 调用填充 ListView 元素的各个 CardView。

模板方式要求你记住这一点:backbone的 View 是策略框架，而不是策略模板。渲染不必渲染到 DOM 中。例如，您可以使用 render() 返回字符串。如果您的事件管理器仅位于 ListView 对象上(可能；我已经这样做了)，那么您可以让 ListView 调用“CardView 渲染数组的结果数组”并将其直接插入到 ListView 的模板中。这实际上更快，因为您只需要浏览器在将整个 ListView HTML blob 插入到父 DOM 对象的innerHTML 中时分析一次。