2

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;
    });

すべてが機能しますが、テンプレートのラッパー div の一部としてidandを使用できると便利です。classNameこれをテンプレートに追加すると、レンダリング時に正しく表示されますが、バックボーン ビューによって別の 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>

動作するようです。パフォーマンスに影響があるかどうか疑問に思っています。報告します。

4

2 に答える 2

2

ID/クラス（および使用したいその他の属性）を含む親divでテンプレートを「ラップ」しないのはなぜですか

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

次にsetElementを使用して div をビューの要素として設定します。

(注: テキスト プラグインを使用したことはありませんが、この方法を使用できない理由はありません)

また、 setElement についての詳細。

于 2012-10-16T22:21:44.213 に答える
2

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());

初期化関数で。これにより、script タグのコンテンツが読み込まれます。

于 2012-10-16T20:24:42.737 に答える