javascript - 如何使用 HotTowel 绑定(bind)谷歌地图？

Question

我正在尝试在 HotTowel 中显示一个简单的 map 。

在 home.html 页面我有:

<section>
  <div id="map-canvas" data-bind="map: map"></div>
</section>

在 home.js 中我有:

define(['services/logger'], function (logger) {
  var vm = {
    activate: activate,
    title: 'Home View',
    map: map
};

  return vm;

  function activate() {
    google.maps.event.addDomListener(window, 'load', initialize);
    logger.log('Home View Activated', null, 'home', true);
    return true;
  }

  var map;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }
});

如何绑定(bind)模型和 View 以显示 map ？

Answer 1

编辑**

以下答案适用于 Durandal 1.2。在 durandal 2.0 中，viewAttached 事件被重命名为attached。您可以阅读有关它的 Durandals 文档 here .

---

Durandal 有一个 viewAttached 事件，一旦 View 被数据绑定(bind)并附加到 dom，就会在您的 View 模型上调用该事件。那将是调用 google maps api 的好地方。

define(['services/logger'], function (logger) {
  var vm = {
    viewAttached: initialize
    title: 'Home View',
    map: map
};

  return vm;

  var map;
  function initialize(view) {
    logger.log('Home View Activated', null, 'home', true);
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }
});

再次编辑以解决人们的评论**

根据 Jamie Hammond 的评论，更好的做法是将 DOM 横向范围限定到所附加的 View 。如果 DOM 元素是 View 的一部分。

因此，在您的 viewAttached(在 durandal 1.2 中)或 attached(在 durandal 2.0 中)中，您将:

var map;
var mapOptions = { /*map options*/ };
var vm = {
   attached: function (view) {
       var mapCanvas = $('#map-canvas', view).get(0);
       map = new google.maps.Map(mapCanvas, mapOptions);
   }
}

我根本没有搞砸过 Durandal 2.0，因为我一直忙于工作和其他事情，当我搞砸 Durandal 1.0 时，它只是为了好玩，但我确实喜欢这个框架，希望有一天能得到玩2.0。话虽如此，我在 Durandal 1.0 附带的 View 中生成 map 时确实遇到了问题。但是，我没有使用谷歌地图。我正在使用 Leafletjs。我对这个问题的解决方案是在 viewAttached 中创建一个延迟，它会在短暂的延迟后重新绘制 map 。这是因为 Durandal 在 View 中的转换与传单在飞行和淡入时在 dom 元素中绘制 map 的能力不能很好地配合。

所以，在 viewAttached 中，我会像这样绘制 map :

window.setTimeout(drawMap, 10);

同样，这是我遇到的一个非常具体的问题，而不是 Durandal 的问题。当 DOM 元素仍在过渡时，Leafletjs 无法正确渲染 map ，这是一个更大的问题。