0

質問はあなたを混乱させるかもしれません.「Backbone.js」を使用して「ul」タグと「li」タグから「タブ」ウィジェットを実現したいのですが、それはMVCの概念です。実行する方法？

例えば

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

リンク「1」をクリックすると、一部のコンテンツ（div）を表示し、他のコンテンツを非表示にしたい MVC コンセプトを使用する方法は？

これは Backbone と MVC がなくても実行できますが、Backbone でこれを実行したいので、助けてください。

4

1 に答える 1

-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;) をインスタンス化すると、これが呼び出されます。

于 2012-12-11T10:51:40.467 に答える