0

私は Backbone JS を初めて使用し、概念を理解するのに苦労しています。

画面に一度に 1 つのパネルが表示される、パネルとのインターフェイスがあります。各パネルは、独自のモデルがアタッチされた独自のビューによって制御されます。現在、各パネルは、クリックして次のパネルを表示できる「アクティベーター」タブとして表示されます。

私の考えでは、これらのタブは実際には親パネル ビューのサブビューです。パネルがなければ、タブは存在しません。ただし、ユーザーがパネル (ビュー) を切り替えることができるように、すべてのタブを一度に画面に表示する必要があります。したがって、基本的にすべてのパネル (テンプレートはともかく) がロードされますが、タブのクリックによってトリガーされるまで非表示になり、その時点でそのコンテンツが入力されるか、更新されます。

私の問題は、アーキテクチャ上、イベントをタブビューにバインドすることにあります。たとえば、次のようになります。

window.PanelTabView=Backbone.View.extend({

    className: 'view panel-tab-view',

    el: '#appPanelTabs',

    tagName: 'li',

    events: {
        'click a': 'test'
    },

    initialize: function() {

    },

    render: function(panel) {
        this.$el.append(this.template(panel.toJSON()));
    },

    test: function(x) {
        console.log(this.cid);
    }

});

そのため、タブがクリックされると、すべてのタブ ビューに対してすべてのクリック イベントが発生します。

では、すべてのタブを 1 つのビューとして扱うべきでしょうか? しかし、テンプレートのモジュール性の観点から、各タブが独自のビューを持つというアイデアが気に入っています。

あるいは、Backbone とその MVC 風のアプローチについて、何か大きなものを見逃しているのかもしれません。

このシナリオで何をしますか?

4

2 に答える 2

0

単純にタブを管理し、クリックをタブ ビューに委任するだけの親ビューを用意しないのはなぜですか? それはかなり単純なアプローチになります。

または、ルーターを使用している可能性があり、ルーターで特定のルートに基づいて個々のタブ ビューを作成することもできます。これにより、ページをリンク可能にすることができます。

最初のアプローチ:

ParentView = Backbone.View.extend({

    el : '#your-tabs',

    events : {
        'click #tab1' : 'tab1',
        'click #tab2' : 'tab2'
    },

    tab1 : function() {
        var t1 = new Tab1();
        t1.render();
    },

    tab2 : function() {
        var t2 = new Tab2();
        t2.render();
    }
});

ルーターの場合:

MyRouter = Backbone.Router.extend({

    routes : {
        "tab/1" : 'tab1',
        "tab/2" : 'tab2'
    },

    tab1 : function() {
        var t1 = new Tab1();
        t1.render();
    },

    tab2 : function() {
        var t2 = new Tab2();
        t2.render();
    }

});

バックボーンは、ビューがどのように構築されるかについて特に意見を述べているわけではありませんが、これらは彼らの考え方に合っているようです。

すべてのタブを 1 つのビューとして扱うことはあまり意味がありません。1 つのタブのデータが変更されたからといって、すべてのタブを再レンダリングするのはばかげています。

于 2013-04-04T20:23:40.213 に答える
0

私はあなたの問題の多くを理解していませんでしたが、少なくとも実際にはボタンが 1 つしかないことがわかりました。したがって、複数のビューを持つべきではありません (とにかく意味がありません)。ただし、できることは、ビューがリッスンするモデルで「選択された」属性を使用することです。したがって、基本的に、ユーザーがボタンをクリックすると、コレクションのおかげで次のパネルが表示され（推測）、前のパネルの選択が解除され（selected 属性が false に設定されます）、ビューが消えて次のパネルが選択されます、およびそのビューが表示されます。必要に応じて、後でコードを追加します。

于 2013-04-04T19:02:53.517 に答える