1

私は Backbone を初めて使用するので、これにどのようにアプローチするべきかについていくつかの光を当てたいと思います。ここで正しい定義を使用していない可能性があります - 前もって申し訳ありません!

現在、それぞれにボタンを持つ要素の行があります (これらのボタンをボタン A と呼びます)。これらの行は、Rails パーシャルとして生成されます。ボタンをクリックすると、その行の情報に固有のコントロールを含むポップアップ ボックスが開きます。コード的には、ボタン A のいずれかがクリックされるたびにそれ自体とその内部の情報を調整するポップアップ ボックスが 1 つだけあり、それは index.html.erb ファイルにあります。

これらのコードを Backbone ビュー オブジェクトに変換したいのですが、ポップアップ ボックス ビューを複数のボタンと相互作用させる方法がわかりません。

これにアプローチする正しい方法は、ボタンごとにポップアップ ボックスを作成し、相互に通信する複数のポップアップ ビューを存在させることでしょうか? これに対する正しいアプローチは何でしょうか？

現在、これらの要素はいずれもバックボーン ビュー オブジェクトではありません。

前もって感謝します。

4

1 に答える 1

3

私は仮定しています：

  • ポップアップウィンドウではなく、モーダルポップアップボックスを参照しています。ポップアップ ウィンドウのコンテンツを変更しようとしている場合は、必要なデータを表示する新しい URL をロードするだけです。
  • すべての HTML マークアップは、Rails テンプレートによって既に作成されています
  • jQueryを使用しています

JSFiddle の例: http://jsfiddle.net/4J6fL/

最初のステップは、データ リストの機能を担当するBackbone.Viewインスタンスを作成することです。

var DataView = Backbone.View.extend({
    events: {
        // this event will be bound to every button inside our parent element
        "click button": "enlarge"
    },

    enlarge: function(e) {
        // backbone rebinds 'this' to refer to the View. It will not refer to the element 
        // triggering the event as it would in jQuery. Grab a reference to the triggering element.
        $el = $(e.currentTarget);

        // gather the data for our popup window
        var popupData = {
            title: $el.siblings('p').text(),
            img: $el.siblings('img').attr('src')
        };

        this.popup(popupData);
    },

    popup: function(data) {
        // find the view's popup box element - this.$el refers to the views bound DOM element
        var $enlarged = this.$el.find('#enlarged');

        // create new elements based on the data
        var $title = $('<h2 />', { text: data.title });
        var $img = $('<img />', { src: data.img });

        // empty the popup box of current data
        $enlarged.html('');

        // fill the popup box with our new data
        $enlarged.append($title);
        $enlarged.append($img);
    }
});

この時点で、任意の DOM 要素にバインドできるビューがあり、上記の機能が提供されます。

  • このeventsプロパティは、ビューへのイベント コールバックのバインドを担当します。
  • コールバックのコンテキストに注意してthisください。バックボーンはそれをイベントではなくビューにバインドします。
  • this.$elビューにバインドされた DOM 要素を参照します。今後の方法について説明します。
  • 実際のポップアップ ロジックは、標準の jQuery DOM 操作です。

ビューができたので、それを初期化して使用する必要があります。これは、コントローラーとして機能する Backbone.Router で行われます。

dataView = new DataView({ el: $('#data-view') });

elこのビューにバインドされる要素 ( ) を渡す方法に注意してください。これにより、DOM 要素がビューにバインドされ、ビュー内から操作できるようになります。

次の論理的なステップは、ポップアップ コードを別のビューに分離し、イベントを使用して更新する必要があることを通知することです。これにより、ページの他の領域から簡単にポップアップをトリガーできます。

于 2012-10-25T01:31:51.367 に答える