Question

我刚开始使用backbone.js，我注意到的一件事是，有时我不希望任何tagName包含/封装我的视图的模板代码。如果我将其保留在''或'span'，我的代码中会出现div和span。

我找到的替代方法是从我的模板中移除包含标记（在我的示例中为<div class="photo_box">，如下所示），并在我的视图中将其用作tagName。大多数情况下，此标记将包含一个类（.photo_box），我仍然需要执行addClass到（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>

Answer 1

您可以随时使用setElement：

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>有限，permitted content对于容器（即使是临时容器）来说是一个糟糕的选择。如果您开始将任意HTML放入<span>，则可能会使浏览器重新排列HTML以获得有效的内容。 <div>是一个更安全的选择，因为它几乎可以容纳任何东西。

Answer 2

您无需手动添加类名。您可以使用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>

Backbone.js我们可以没有任何tagName吗？

2 个答案: