4

我刚开始使用backbone.js，我注意到的一件事是有时我不希望任何tagName包含/封装我的视图的模板代码。如果我把它留在''or ，我会在我的代码中变得'span'不必要。divspan

我发现的替代方法是从我的模板中删除包含标签（<div class="photo_box">在我的示例中如下所示），并将其用作tagName我的视图。大多数时候，这个标签将包含一个类 ( .photo_box)，我仍然需要执行一个addClassto (this.el)。我真的不喜欢分散我的模板代码。

还有其他方法吗？

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：

设置元素 view.setElement(element)

如果您想将 Backbone 视图应用到不同的 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 放入. 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 回答