1

如何在 Underscore.js 模板中调用与模板不同的模板？

HTML 代码：

<*script id="editWrapView" type="text/template">
        <div class="wrapperFields__leftUnderLine disp_intop"></div>
                <div class="wrapperFields__titleItem disp_intop">
                <span class="f_s_100"><%=title%></span>
                </div>
                <div class="wrapperFields__rightUnderLine disp_intop"></div>

                <div class="wrapperFields__basicFields ">
                    <ul class="basicFields__ulList">
                        <li class="ulList__item">
                            <span class="question" title=""></span>
                            <label id="sortOrder" class="labelItem">SortOrder</label>
                            <input name="sortOrder" class="custom-input width_fields_input"/>
                        </li>
                        <li class="ulList__item">
                            <span class="question" title=""></span>
                            <label id="sortOrder" class="labelItem">TYPE</label>
                            <select class="width_fields_select">
                                <option value="1" <% if(type == 1){ %>selected<%}%> >Category</option>
                                <option value="2" <% if(type == 2){ %>selected<%}%>>Link</option>
                                <option value="3" <% if(type == 3){ %>selected<%}%>>Spacer</option>
                                <option value="4" <% if(type == 4){ %>selected<%}%>>Divider</option>
                                <option value="5" <% if(type == 5){ %>selected<%}%>>HTML</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="wrapperFields__changeFields disp_intop">
                    <%= _.template( $("#category_"+type).html(), this) %> <!--  QUESTION STRING -->
                </div>
            </*script>
            <*script id="category_1" type="text/template">
                <ul class="basicFields__ulList" id="1">
                    <li class="ulList__item">
                    <span class="question" title=""></span>
                    <label id="sortOrder" class="labelItem">ChooseCategory</label>
                    <select class="width_fields_select">
                        <option value="1" <% if (type == 1){ %>selected <% } %> >Category</option>
                        <option value="2">Link</option>
                        <option value="3">Spacer</option>
                        <option value="4">Divider</option>
                        <option value="5">HTML</option>
                    </select>
                    </li>
                    <li class="ulList__item">
                    <span class="question" title=""></span>
                    <label id="sortOrder" class="labelItem">LEVELS TO SHOW</label>
                    <input name="sortOrder" class="custom-input width_fields_input"/>
                    </li>
                </ul>
                </*script>

骨干代码：

render : function(){
            var tpl = _.template($("#editWrapView").html(), this.model.toJSON());
            this.$el.html(tpl);
            return this;
        },
4

1 回答 1

1

您可以渲染部分模板并将其添加到主模板。

尝试这样的事情：

render: function(){
     var tpl = _.template($("#editWrapView").html(), this.model.toJSON());
     this.$el.html(tpl);

     var partial = _.template($("#myPartial").html(), this.model.toJSON());
     this.$el.find(".wrapperFields__changeFields").append(partial);

     return this;
}
于 2013-05-07T02:57:40.177 回答