Question

我无法获取jquery选项卡来正确呈现和交互。以下是相关的代码片段;有没有看到什么可能是错的？

正如您将在下面看到的，在我的骨干视图中，我将一个（jquery选项卡）模板添加到div（视图的el），然后渲染该div。

模板：

<div id="tab-set">
    <ul>
        <li><a href="#panel1">Details</a></li>
        <li><a href="#panel2">Images</a></li>
        <li><a href="#panel3">Appendix</a></li>
    </ul>
    <div id="panel1">...</div>
    <div id="panel2">...</div>
    <div id="panel3">...</div>
</div>

骨干视图

App.Views.IndexView = Backbone.View.extend({

    tagName: 'div',

    id: 'user-content',

    template: JST['users/index'],

    ...

    render: function(){
        var view = this;

        $(this.el).html(this.template({user: this.model}));
        this.$('#date').datepicker();
        this.$('#tab-set').tabs();

        return this;
    }
});

Answer 1

你写道：

“在我的骨干视图中，我将一个（jquery tab）模板添加到div（视图的el），然后渲染该div”。

但这并不完全正确。在您的代码中，您为id为“user-content”的div创建了一个视图：

App.Views.IndexView = Backbone.View.extend({

    tagName: 'div',

    id: 'user-content'

    [...]

我在user-content代码中看不到任何带有“html”ID的div。也许它在其他地方并且您没有在剪切/粘贴的代码中显示它？

您可以声明html代码中不存在div或id的视图，但是您必须声明层次结构中的视图（通常为AppView }）您动态创建IndexView并将其附加到现有元素，例如：

window.AppView = Backbone.View.extend({
    [...]
    render: function (item) { 
        var myView = new IndexView({ model: item });
        this.el.append(view.render().el);
    }

{{}}上的这个链接可能会有所帮助。

希望这会有所帮助。

Backbone View中的jQuery选项卡

1 个答案: