Google maps 淘汰Google地图：组件与自定义绑定处理程序

当我在谷歌上搜索“淘汰谷歌地图”时，我发现了不少基于KO的谷歌地图实现。我能够找到的所有方法都采用了使用自定义绑定处理程序的方法，而我最初打算将其实现为敲除组件

示例：

有人能给我指出正确的方向吗为什么在这里人们更喜欢自定义绑定处理程序而不是KO组件

我的计划用例如下：

我正在实现一个包含地址搜索结果列表的页面。到目前为止，列表是一个KO组件，每个列表条目都是由另一个KO组件生成的，列表组件在foreach绑定中反复调用该组件。在这个搜索结果列表旁边，我需要一个谷歌地图，显示地图中的搜索结果条目。列表、列表条目和地图之间也会有很多交互

以下是到目前为止我得到的信息：

var GMap=函数（）{
var self=这个；
var initMap=函数（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{lat:51.4387974，lng:6.9922915}
});
};
initMap（）；
};
$（文档）.ready（函数（）{
ko.组件寄存器（“gmap”{
视图模型：GMap，
模板：{element:'gmap'}
});
ko.applyBindings（）；
});
#地图{
高度：400px；
宽度：600px；
}
组件和自定义处理程序是完全不同的东西

定制装订
基本上，我们可以访问：


使用它的HTML组件
绑定值（提供给绑定的表达式）
元素中的所有其他绑定
元素的绑定上下文，从中可以访问
$root
，
$parent
，等等

其定义包括两个功能：


init
：允许进行初始设置，如初始化小部件、设置事件处理程序等
update
：它在
init
之后调用。此时，您可以通过绑定、所有元素绑定、上下文等访问属性（包括可观察属性）。这将创建订阅，当任何访问的可观察更改时，该订阅将调用update

因此，当您需要直接与DOM元素交互时，应该使用自定义绑定，例如修改其属性、初始化小部件、订阅事件等等

组成部分
组件是完全不同的。定义组件时，必须定义：


模板，它是一组DOM元素，通常带有绑定
视图模型（通常是构造函数或工厂）

使用组件时：


将实例化viewmodel
模板已加载
viewmodel已绑定到模板

因此，组件允许重用视图模型和模板

那么，有什么区别呢？
自定义绑定可以直接访问DOM元素，允许与它们交互、订阅事件、修改属性等

组件只是一个viewmodel，以及一组绑定到该特定viewmodel的DOM元素

因此，在谷歌地图的情况下，它需要初始化一个小部件（地图）并与地图事件交互，并响应可观察的属性，你永远不能使用组件，因为组件不允许与DOM元素直接交互。（记住是一堆带有绑定的HTML元素，以及相应的视图模型，它不能包含任何与这些元素交互的逻辑）

自定义绑定通常应用于单个元素（尽管它可以处理其子元素，如
foreach
）。在谷歌地图的情况下，您只需要显示地图的元素

组件通常是一组或多或少复杂的DOM元素，这些元素“从外部”是不可访问的。与主viewmodel的唯一通信是通过参数完成的。组件不能直接与DOM元素交互：它必须通过ko绑定进行交互

因此，对于谷歌地图来说，很明显，您需要一个自定义绑定

只有当您希望模块化或重用一组DOM元素以及相关的viewmodel时，创建组件才有意义，viewmodel还可以包括访问web服务（通过AJAX）、进行计算（通常通过使用计算的可观察对象）等功能。例如，可以使用组件实现购物车，该组件包括：


显示购物车中项目的DOM元素（可能是HTML表和一些控件）
用于修改购物车内容的控件（例如，用于删除元素或更改数量）
显示总额、税金等的视图模型
存储购物车供以后使用或付费的功能（可能是对服务的ajax调用）

在这种情况下，购物车将有一个viewmodel，其中包括计算出的可观测值（显示总额和税费）、删除项目、修改数量、存储或支付等功能。以及一组具体的DOM元素，这些元素带有此viewmodel的绑定，即显示购物车并与之交互的HTML

在谷歌地图的情况下，如果没有自定义绑定的帮助，或者没有额外的非ko脚本的恶意使用，组件将无法使用

如果您想在地图旁边显示位置列表并修改该列表，可以使用一个组件，该组件将包括一个带有列表和相关功能的viewmodel，以及一个包含一个带有Google Maps自定义绑定的元素的模板。这是有意义的：viewmodel+几个元素

结论
这都意味着定制绑定通常具有很深的内部特性