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 / class（以及您想要使用的任何其他属性）的父div中

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

然后使用setElement将div设置为View的 el -ement。

（注意：我从未使用过该文本插件。但我认为没有理由不采用这种方法）

另外：more about setElement。

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

2 个答案: