javascript - 我如何结合谷歌地图和基于主干 View 的信息框

Question

我想要一个谷歌地图，当点击一个标记时，将打开一个信息框(或自定义覆盖)，它实际上是(或基于)主干 View 。主干 View 应该在第一次打开时通过调用 ajax 来获取它的内容，但是如果关闭并重新打开，则不应再次调用服务器(应该显示第一次打开的结果)

我根本不知道如何实现它，因为信息框的内容是一个 dom 元素(我只想在第一次打开时更改/填充它)。 (顺便说一句，我主要是后端开发人员，前端对我来说很新)

我想到的是做类似的事情，但我不确定这是正确的方法:

var view = new MyOverlayBackboneView({ model: myModel});
var infoBoxOptions = {
   content: view.el
};



var infoBox = new InfoBox(infoBoxOptions);

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(some_lat, some_lng),
    ...
    other marker related parameters
});

marker.infoBox = infoBox;

google.maps.event.addListener(marker, 'click', function() {
    this.infoBox.open(map, this);
}               

我在这里缺少的是第一次打开信息框时 Backbone View 的 render() 部分，并且不太清楚在哪里执行。

不用说，我希望启动信息框的代码部分尽可能干净，并将任何样式和 ajax 调用留给主干 View 。

如果有人能指出正确的方向(教程/示例代码)，我将不胜感激。提前感谢您提供的任何帮助。

Answer 1

你的观点可能是这样的:

MyOverlayBackboneView = Backbone.View.extend({
  render: function() {
    [rendering the contents of your view here]
    return this;
  }
};

然后在创建您的信息框时:

var infoBoxOptions = {
  content: view.render().el
};

这将使您的 View 仅呈现一次，然后将呈现的内容放入信息框中。