「Knockout Google Maps」をグーグルで検索すると、KO ベースの Google マップの実装がかなり見つかります。私が見つけることができたものはすべて、カスタム バインディング ハンドラーを使用するアプローチを採用していましたが、当初はそれを Knockout コンポーネントとして実装するつもりでした。
例:
- http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding
- http://www.hoonzis.com/knockoutjs-and-google-maps-binding/
- https://github.com/manuel-guilbault/knockout.google.maps
ここでKOコンポーネントよりもカスタムバインディングハンドラーを好む理由を誰かが正しい方向に向けることができますか?
私の計画されたユースケースはこれです：
住所検索結果のリストを含むページを実装しています。これまでのリストは KO コンポーネントであり、各リスト エントリは、リスト コンポーネントが foreach バインディングで繰り返し呼び出す別の KO コンポーネントによって生成されます。この検索結果のリストの横に、結果エントリもマップに表示する Google マップが必要です。また、リスト、リスト エントリ、およびマップの間には、非常に多くの相互作用があります。
ここに私がこれまでに持っているものがあります:
var GMap = function () {
var self = this;
var initMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.4387974, lng: 6.9922915}
});
};
initMap();
};
$(document).ready(function() {
ko.components.register('gmap', {
viewModel: GMap,
template: { element: 'gmap' }
});
ko.applyBindings();
});#map {
height: 400px;
width: 600px;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.22"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<gmap></gmap>
<template id="gmap">
<div id="map"></div>
</template>