google-maps - Knockout Google Map : Component vs. 自定义绑定(bind)处理程序

Question

当我搜索“Knockout Google Maps”时，我发现相当多的基于 KO 的 Google Maps 实现。我能够找到的所有这些都采用了使用自定义绑定(bind)处理程序的方法，而我最初打算将其实现为 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

谁能指出我正确的方向 为什么这里更喜欢自定义绑定(bind)处理程序而不是 KO 组件 ?

我计划的用例是这样的:

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

这是我到目前为止所得到的:

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>

Answer 1

绑定(bind)
绑定(bind)，无论是否自定义，是一个非常简单的概念，涵盖两件事:

UI 元素的属性发生变化，因此它应该更新对象 (ViewModel)

对象 (ViewModel) 的属性发生变化，因此它应该更新 UI 元素。

从上面看，如果只实现了 1 个，则称为 One Way Binding(因为如果您更改 UI，它会更新对象，但不会更新对象)。如果 1 和 2 都实现，则称为双向绑定(bind)。
所以在任何时候如果你认为你需要做一些事情，你需要使用绑定(bind)，如果框架没有你需要的绑定(bind)，自定义绑定(bind)。
最有可能的是，您所说的 map 需要像上面这样的东西。它确实做到了，因为作者在第一段中这么说:

Concretely, you can learn how to make the maps marker part of the View and automatically change its position any time when the ViewModel behind changes.

看，上面作者讲了2:当ViewModel改变时，改变UI元素的位置。
组件
组件是具有可重用项目的概念，该项目可能具有 UI 但不一定具有 UI，并且与其一起打包工作所需的所有代码。这样就可以重复使用了。例如，它可能只是一个只允许数字的输入 UI 元素。它所需的所有代码都与 UI 元素一起打包。
现在与它一起打包的代码可能与绑定(bind)相关。如果他们使用的框架没有他们需要的绑定(bind)，它甚至可能有自定义绑定(bind)。此外，它可能还有与绑定(bind)无关的附加代码。
此外，一个组件可能有一个或多个 UI 元素。具有多个元素的组件的一个很好的例子是消息框。
结论
绑定(bind)和组件是分开的东西。一个组件内部可能有绑定(bind)，或者它可能有其他代码使其工作或两者兼而有之。
就您所说的 map 而言，他们只是为其添加了一个功能:对 ViewModel 中的更改使用react。它不是一个组件，因为它不是自包含和可重复使用的。
他们本可以使用组件来完成。但是，如果他们这样做并说它是一个 KO 组件，它可能仍然有 KO 特定的绑定(bind)代码与 ViewModel 和所需的所有 UI 元素一起打包。