4

私はおもちゃのアプリを作成しており、これらのライブラリについて学ぼうとしており、「タブ」インターフェイスをどのように表示するかを理解したいと考えていました。一番上にいくつかのボタン（またはリンクなど、最も一般的なもの）を配置したいと思います。1 つを選択すると、選択されたように見え、ページのメイン コンテンツが変化して、そのタブの内容が表示されます。

現在、私の学習アプリは非常にシンプルです。

<body>
    <div class="content"></div>
</body>

そしてバックボーン ビュー:

var ContentView = Backbone.View.extend({
    el: $('.content'),
    // ..

これまでのところ、html で <% タグを使用してパーシャルを作成し、ContentView が何らかの方法でそこにさまざまなものをレンダリングすることを検討してきました。私が持っていたが、追求する方法がよくわからないもう1つのアイデアは、1つのdivの変更を順番に担当するいくつかのバックボーンビューです。

タブボタンを表示する方法や、さまざまなタブのビューロジックをきれいに分離する方法など、ここでの標準的なアプローチに関するアドバイスをいただければ幸いです。

4

1 に答える 1

5

「関心の分離」モデルに従います。タブ ナビゲーションを処理するメイン コンテンツ ビューができました。誰かがタブをクリックするたびに、そのメイン コンテンツ ビューは、そのタブが現在アクティブであることをビューに伝える必要があります。次に、そのサブビューがそこから物事を処理します。コード例を次に示します。

これがHTMLだとしましょう：

<div id="tabContainer" class='tabs'>
    <div class='tab' id="content1Tab"></div>
    <div class='tab' id="content2Tab"></div>
    <div class='tab' id="content3Tab"></div>
</div>
<div id="contentContainer">

</div>

これはおそらくjavascriptです。

ContentView = new (Backbone.View.extend({}
    events: {
        'click .tab': 'openTab'
    },

    el: $("#tabContainer"),

    tabViews: {},

    openTab: function (e) {
        var el = $(e.currentTarget);
        $("#contentContainer").children().detach();

        if(!this.tabViews[el.attr('id')]) {
            this.tabViews[el.attr('id')] = this.createTabViewForEl(el);
        }

        this.tabViews[el.attr('id')].render($("#contentContainer"));
    },

    createTabViewForEl: function (el) {
        var tab;
        switch(el.attr('id')) {
            case "content1Tab":
                tab = new FirstContentTab();
                break;
            /* etc */
        }
        return tab;
    }
))();

FirstContentTab = Backbone.View.extend({
    render: function (targetEl) {
        this.setElement($("#someContentEl"));
        this.$el.appendTo(targetEl);
    }
    /** stuff like loading in content for tab, or making a monkey dance when it opens **/
});

タブが属しているモジュールを参照し、requirejs やその他のモジュール ローダーを使用してそのモジュールをロードし、問題のタブを指定するなど、より洗練された方法があります。ただし、どちらにしても、その 1 つのメイン ビューでやりすぎないようにしてください。そうしないと、必要以上に複雑なものになってしまいます。

于 2013-03-30T21:43:24.407 に答える