标签: knockout-binding-handlers

淘汰Google Map:组件与自定义绑定处理程序

当我用谷歌搜索“ 淘汰谷歌地图 ”时,我发现很多基于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

2
推荐指数
1
解决办法
660
查看次数