当我搜索“Knockout Google Maps”时,我发现相当多的基于 KO 的 Google Maps 实现。我能够找到的所有这些都采用了使用自定义绑定(bind)处理程序的方法,而我最初打算将其实现为 Knockout 组件。
例子:
谁能指出我正确的方向为什么这里更喜欢自定义绑定(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>
最佳答案
绑定(bind)
绑定(bind),无论是否自定义,是一个非常简单的概念,涵盖两件事:
从上面看,如果只实现了 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 元素一起打包。
关于google-maps - Knockout Google Map : Component vs. 自定义绑定(bind)处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34652878/