在包含父元素的主干视图中使用模板

Question

我正在尝试重构主干视图以在外部模板中具有所有与HTML相关的标记。 理想情况下，我希望在外部模板中也具有视图附加到的元素。 目前，我有：

html模板

    <h3 class="pull-left">Search</h3>
    <input id="customer-search-input" class="input-large search-query" placeholder="Cust #, Name, Suburb or Owner" />
    <button id="customer-search-show-all" class="btn pull-right">Show All</button>
    <span id="update-time" class ="pull-right"></span>
    <table id="customer-search-results-table" class="tablesorter tablesorter-dropbox">
        <thead>
        <tr>
            <th>Customer Number</th>
            <th>Customer Name</th>
            <th>Suburb</th>
            <th>Owner</th>
            <th>Phone Number</th>
        </tr>
        </thead>
        <tbody id="customer-list-results">
        </tbody>
    </table>

以及消耗模板的主干视图：

    define(['jquery','underscore', 'backbone', 'text!templates/customerSearch.html','text!templates/customerRow.html', 'jquery.tablesorter' ],
        function($, _, Backbone, customerSearchTemplate, customerRow) {

        // ... Other sub-views

        var CustomerSearch = Backbone.View.extend({
            id:'customer-search', // would prefer to have these
            className: 'well',    // in the template
            initialize: function(){
                this.$el.html(customerSearchTemplate);
                this.customerSearchInput = this.$("#customer-search-input");
            },
            events: {
                "click #customer-search-show-all": "showAll",
                "keyup #customer-search-input": "search"
            },
            search: function(){
                var filteredCustomers = this.collection.search(this.customerSearchInput.val(), ['id','companyName','suburb','businessContact']);
                this.customerSearchResultsView = new CustomerSearchResultsView({collection: filteredCustomers});
                this.customerSearchResultsView.render();
            },
            showAll: function() {
                this.customerSearchResultsView = new CustomerSearchResultsView({collection: this.collection});
                this.customerSearchResultsView.render();
            }
        });

        return CustomerSearch;
    });

一切正常，但是能够将id和className作为模板的包装div的一部分会很棒。 如果我将其添加到模板中，则它在呈现时会正确显示，但由主视图的另一个div包裹。

我正在尝试使所有事物尽可能地分离。

谢谢！

---

2012年10月17日更新

使用view.setElement方法

    var CustomerSearch = Backbone.View.extend({
            template:_.template(customerSearchTemplate),
            initialize: function(){
                  this.setElement(this.template());
            },
            // ...
    });

带模板

    <div id="customer-search" class="well">
            <h3 class="pull-left">Search</h3>
            // ...
    </div>

似乎起作用。 现在想知道是否有性能下降。 将会回报。

Answer 1

您可以将模板元素包装在带有ID的脚本标签中。

<script id="custom-search" type="text/template">
    <h3 class="pull-left">Search</h3>
    <input id="customer-search-input" class="input-large search-query" placeholder="Cust #, Name, Suburb or Owner" />
    <button id="customer-search-show-all" class="btn pull-right">Show All</button>
    <span id="update-time" class ="pull-right"></span>
    <table id="customer-search-results-table" class="tablesorter tablesorter-dropbox">
        <thead>
        <tr>
            <th>Customer Number</th>
            <th>Customer Name</th>
            <th>Suburb</th>
            <th>Owner</th>
            <th>Phone Number</th>
        </tr>
        </thead>
        <tbody id="customer-list-results">
        </tbody>
    </table>
</script>

然后，在您的视图中声明以下选项：

template : _.template($('#custom-search').html())

然后，您将可以致电：

this.$el.html(this.template());

在您的初始化函数中。 这将加载脚本标签的内容。

Answer 2

为什么不将模板“包装”到包含ID /类（加上您要使用的任何其他属性）的父div中

<div id="customer-search" class="well"> ... </div>

然后用setElement设置DIV作为视图的El -ement。

（注意：我从未使用过文本插件。但是我看不出您不能使用此方法的原因）

另外： 有关setElement的更多信息 。