4

マップとbackbone.jsを一緒に使用しています。使用するMapJSライブラリはLeafletですが、GoogleMapsAPIもここに適用されます。

問題： Backbone.jsを使用すると、プレゼンテーション（ビュー）をデータ（モデル、コレクション）から分離できます。Google Maps JS APIまたはリーフレットを使用する場合、マーカーのレンダリングを制御できないようであるため、各マーカーのバックボーンビューを設定できません。これは本当ですか？

マップをbackbone.jsと一緒に使用すると、コールバック関数でネストされたビューとイベントハンドラーを取得し始めます。

JS（Leaflet、Google Maps APIに類似）

// Handle a dragging on the map
map.on('dragend', function() {
    App.markersList.fetch(
        data: someData,
        processData: true
        function() {
            App.markersListView.render();
    };)
});

// Handle a click on a Marker
map.on('popupopen', function() {
    // Activate bootstrap tabs
    $('#tabs').tab();

    // Submit click handler
    $('#submit-button').click(function() {
        $.post('/api/submit-something',
            {data: data},
            function() {
                // Remove some divs
                $('#some-divs').fadeOut();
            })
    })

    // Activate slideshow
    Galleria.loadTheme('/js/vendor/galleria.miniml.min.js');
    Galleria.configure({
        height: 320
    });
    Galleria.run('#galleria');

    // Validation
    $('.email-link form').validate({
        rules: { ... }
    });


});

よくわかります...BackboneのMVC構造の外でこれらを行う必要があります。両方を統合する正しい方法を見逃している可能性があります。何か案は？ありがとう！！

4

1 に答える 1

4

マーカーの表示では、そのマーカーへのポップアップのコンテンツを意味していると思いますか？ビューを機能のポップアップコンテンツとしてバインドすることができます。少なくともリーフレットではそうです。

重要なのは、LeafletPopupsが提供されたDOM要素をコンテンツとして使用できるようにすることです。マーカーの背後にあるモデルについて適切な知識を得るには、モデルのプロパティとしてマーカーを指定できます。これにより、モデルの関連マーカーを取得できます。逆の方法は、署名がモデルを構成するマーカーにバインドするイベントを介して実現できます。

これは、コレクションをフェッチした後にマップビューを設定する方法の簡略化されたスニペットです。

_.each(collection.models, function (model) {
    var attr = model.attributes,
        marker = new L.Marker(new L.LatLng(attr.lat, attr.lon));

        marker.on('click', function () {
            App.vent.trigger("model:select", model);
        });

        model.marker = marker;
        map.addLayer(marker);
});

ここでは、コレクション内のモデルごとにマーカーが描画され、マーカーがモデルのプロパティになります。また、各マーカーは、アプリケーション全体のイベントアグリゲーターでカスタムの「model：select」イベントをトリガーするクリックイベントにバインドされています。ここからは、そのイベントを使用して、次のようなイベントをキャッチすることでポップアップビューを設定できます。

common.vent.on('model:select', function (model) {
    this.select(model);
    this.initPopup(model);
}, this);

InitPopupは次のようになります。

initPopup = function (model) {
    var marker = model.marker,
        view = new PopupView({model: model});

    marker.bindPopup(view.render().el).openPopup();
};

PopupViewは、テンプレートやイベント処理などを備えたバックボーンビュー（私の場合はマリオネット）です。

于 2012-11-01T14:02:36.930 に答える