backbone.js - Backbone.js - 如何使用 MVC 将“ul”“li”标签用作选项卡小部件？

Question

这个问题可能会让你感到困惑，我想使用'Backbone.js'从'ul'和'li'标签实现'tab'小部件，它是MVC概念。怎么做？

例如

<ul>
  <li> One </li>
  <li> Two </li>
  <li> Three </li>
</ul>

单击链接“一个”时，我想显示一些内容（div）并想隐藏其他内容如何使用 MVC 概念？

这可以在没有 Backbone 和 MVC 的情况下完成，但我想用 Backbone 来完成，请帮助我。

Answer 1

您可以创建一个 Backbone.View 来处理您的所有“选项卡”。这个 Backbone.View 应该覆盖您的内容之上的内容。

根据您的 ul，您可以添加 CSS 选择器或其他属性：

<div id="mainDiv">
    <ul>
        <li class="tab-one">One</li>
        <li class="tab-two">Two</li>
        <li class="tab-three">Threeli>
    </ul>
    <div id="tab1" class="tab">...</div>
    <div id="tab2" class="tab">...</div>
    <div id="tab3" class="tab">...</div>
</div>

创建一个 Backbone.View 来处理页面事件：

MyView = Backbone.View.extend({
    el: $('#mainDiv'),
    events: {
    'click .tab-one': 'showTabOne',
    'click .tab-two': 'showTabTwo',
    'click .tab-three': 'showTabThree'
    },
    showTabOne: function() {
        $(this.el).find('.tab').hide();
        $(this.el).find('#tab1').show();
    },
    showTabTwo: function() {
        $(this.el).find('.tab').hide();
        $(this.el).find('#tab2').show();
    },
    showTabThree: function() {
        $(this.el).find('.tab').hide();
        $(this.el).find('#tab3').show();
    }
    ...
}

这只是为了使用 Backbone 显示和隐藏选项卡。你可以用 Backbone 做更多的事情 :)

编辑：如果您的选项卡列表是动态的，您可以使用 jquery 方式将事件初始化放在 Backbone.View 的 initialize() 函数中。一旦您实例化 Backbone.View (var view = new MyView;)，这将被调用