4

tagNamebackbone.js を使い始めたばかりですが、ビューのテンプレート コードを含めたりカプセル化したりしたくない場合があることに気付きました。''またはのままにしておくと、'span'不要になり、コードに含まれます。divspan

私が見つけた代替手段は、テンプレートから含まれているタグを削除し (<div class="photo_box">以下に示す例では)、それをtagNameビューで使用することです。ほとんどの場合、このタグにはクラス ( ) が含まれますが、それでもto (this.el).photo_boxを実行する必要があります。addClassテンプレートコードを散らかすのは本当に好きではありません。

別の方法はありますか？

JS

// Views
PhotoListView = Backbone.View.extend({
    tagName: 'span',

    render: function() {
        _.each(this.model.models, function(photo) {
            $(this.el).append(new PhotoListItemView({ model: photo }).render().el);
        }, this);
        return this;
    }
});

PhotoListItemView = Backbone.View.extend({
    tagName: 'span',

    template: _.template($('#tpl-PhotoListItemView').html()),

    render: function() {
        $(this.el).html(this.template( this.model.toJSON() ));
        return this;
    }


});

HTML

<!-- Templates -->
<script type="text/template" id="tpl-PhotoListItemView">
                <div class="photo_box">
                    <div class="photo_container">
                        <img src="img/profiling/<%= photo_id %>.jpg" class='photo' />
                    </div>
                </div>
</script>

結果

<div id="photo_list">
    <span>
        <span>
                    <div class="photo_box">
                        <div class="photo_container">
                            <img src="img/profiling/f_001.jpg" class="photo">
                        </div>
                    </div>
        </span>
        <span>
                    <div class="photo_box">
                        <div class="photo_container">
                            <img src="img/profiling/f_002.jpg" class="photo">
                        </div>
                    </div>
        </span>
    </span>
</div>
4

2 に答える 2

22

いつでも使用できますsetElement：

setElement view.setElement(element)

バックボーン ビューを別の DOM 要素に適用する場合は、setElementを使用します。これにより、キャッシュされた参照も作成され$el、ビューの委任イベントが古い要素から新しい要素に移動されます。

tagName完全に忘れてください：

PhotoListItemView = Backbone.View.extend({
    template: _.template($('#tpl-PhotoListItemView').html()),
    render: function() {
        this.setElement(this.template(this.model.toJSON()));
        return this;
    }
});

デモ: http://jsfiddle.net/ambiguous/XWEMg/

余談ですが、許可されているコンテンツ<span>が限られているため、コンテナー (一時的なものであっても) としては適していません。任意の HTML を に投げ始めると、ブラウザが HTML を再配置して有効なものを取得する危険があります。Aはほとんど何でも保持できるため、より安全な選択です。<span><div>

于 2012-06-24T16:04:20.210 に答える
7

クラス名を手動で追加する必要はありません。className次のプロパティを使用できます。

PhotoListItemView = Backbone.View.extend({
    tagName: 'span',
    className: 'photo_box',

ところで、この HTML 構造をお勧めします。

<ul id="photo_list">
    <li>
        <img src="img/profiling/f_001.jpg" class="photo">
    </li>
    <li>
        <img src="img/profiling/f_003.jpg" class="photo">
    </li>
</ul>
于 2012-06-24T16:03:25.197 に答える