当我用谷歌搜索“ 淘汰谷歌地图 ”时,我发现很多基于KO的谷歌地图实现。我能够找到的所有方法都可以使用自定义绑定处理程序,而我本来打算将其实现为Knockout组件。
例子:
任何人都可以向我指出正确的方向,为什么在这里比KO组件更喜欢自定义绑定处理程序?
我计划的用例是这样的:
我正在实现一个包含地址搜索结果列表的页面。到目前为止,列表是KO组件,每个列表条目是由另一个KO组件生成的,列表组件反复在foreach绑定中调用该组件。在此搜索结果列表的旁边,我需要一张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();
});Run Code Online (Sandbox Code Playgroud)
#map {
height: 400px;
width: 600px;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
google-maps knockout.js knockout-components knockout-binding-handlers