Question

我有一个谷歌地图，用户可以点击（在地图上随处可见），点击事件打开一个包含表格的Bootstrap模态窗口。我的问题是，如何/在何处处理此提交事件以向标记集合添加标记，将其保存到数据库等等。

目前我有一个地图视图，可以呈现谷歌地图，并为点击添加一个事件监听器。单击地图可打开模态。

App.Views.Map = Backbone.View.extend({
...
initializeMap : function(){}
...
addMapEventlistener : function() {

    google.maps.event.addListener(this.map, 'dblclick', function(event) {

    var coords = event.latLng.toUrlValue();

    var carray = coords.split(",");

    var model = new Backbone.Model({ coords: carray });

    var view = new App.Views.Modal({ model: model });

    var $modalEl = $("#modal");
    $modalEl.html(view.render().el);
    $modalEl.modal();
    }); 
}    


App.Views.App = Backbone.View.extend({

        initialize: function() {

var addMarkerView = new App.Views.AddMarker({ collection: App.markers });

        }

});

// add marker view

    App.Views.AddMarker = Backbone.View.extend({

        el: '#addForm',

        initialize: function() {

            $('<input>', {
                type: 'submit',
                value: 'Submit',
                class: 'smt'
            }).appendTo(this.$el);

            console.log('AddMarker init run'); // this echoed out

        },

        events: {
            'submit' : 'addMarker'      
        },

        addMarker: function(e) {

            e.preventDefault();

            alert('hello');

        },

    });

我的猜测是在地图上的click事件之后呈现的表单，所以我必须在模态打开后以某种方式设置主干事件，并在集合视图中处理表单提交，对吗？

Answer 1

您可能希望使用events对象来绑定您的听众关于何时（重新）绑定您的事件。实例化视图时，events对象中指定的侦听器将绑定到视图元素。这意味着如果您的事件以子元素为目标，那么该子元素存在或不存在的事实并不重要。现在，您必须在特殊情况下重新绑定您的侦听器，其中您在没有setElement方法的情况下更改视图元素。

示例：

<div id="#mydiv"></div>

你想在这个div内的按钮上绑定一个事件（之后你会创建一些事件。）。好吧，here's an example。

Answer 2

好的，解决了。我的错。我将事件添加到了错误的视图中，我必须将它添加到App.Views.Modal视图中（当然事件发生在模态中）。谢谢你的时间！

Google Maps和Backbone.js事件触发

2 个答案: