Question

当我谷歌＆＃34; 淘汰谷歌地图＆＃34;我找到了一些基于KO的Google Maps实现。我能找到的所有这些都采用了自定义绑定处理程序的方法，而我原本打算将它作为Knockout组件实现。

示例：

任何人都可以指出我正确的方向为什么人们更喜欢在KO组件上使用自定义绑定处理程序？

我计划的用例是：

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

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

＆＃13;

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();
});

＆＃13;

#map {
  height: 400px;
  width: 600px;
}

＆＃13;

<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>

＆＃13;

Answer 1

绑定

绑定是一个非常简单的概念，涵盖了两件事：

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

从上面开始，如果仅实现1，则称为单向绑定（因为如果更改UI，它将更新对象，但不会更新对象）。如果同时实现了1和2，则称为双向绑定。

因此，在任何时候，如果您认为需要执行此操作，那么如果框架没有所需的绑定，则需要使用绑定，自定义绑定。

您所说的地图很可能需要上面类似的内容。实际上是因为作者在第一段中说了这一点：

具体来说，您可以学习如何使地图标记成为View的一部分，并在后面的ViewModel更改时随时自动更改其位置。

看，作者在上面讨论了2：当ViewModel更改时，更改UI元素的位置。

组件

一个 component 是一个具有可重用项目的概念，该项目可能具有UI，但不一定具有UI，并且使它与之一起工作所需的所有代码都打包在一起。这样就可以重复使用它。例如，它可能只是一个仅允许数字的输入UI元素。所需的所有代码都与UI元素一起打包。

现在打包在一起的代码可能与绑定有关。如果他们使用的框架没有所需的绑定，它甚至可能具有自定义绑定。另外，它可能还有其他与绑定无关的代码。

此外，组件可能具有单个UI元素或多个UI元素。一个包含多个元素的组件的好例子是消息框。

结论

绑定和组件是分开的东西。组件内部可能具有绑定，或者组件可能具有其他代码以使其起作用，或者两者都起作用。

对于您所说的地图，它们只是向其中添加了一个功能：对ViewModel中的更改做出反应。它不是组件，因为它不是自包含的并且不可重用。

他们可以使用组件来完成。但是，如果他们这样做并说这是KO组件，则它可能仍带有KO特定的绑定代码以及ViewModel和所需的所有UI元素。

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

1 个答案: