Question

这个问题可能让您感到困惑，我希望使用'Backbone.js'来实现'ul'和'li'标签中的'tab'小部件，以及它的MVC概念。怎么办？

例如

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

当单击链接'one'时，我想显示一些内容（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 :)做更多的事情。

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

，就会调用它

Backbone.js - 如何使用＆＃39; ul＆＃39; ＆＃39;利＆＃39;标签作为使用MVC的标签小部件？

1 个答案: