javascript - knockoutjs绑定(bind)不同的API对象

Question

我正在使用 javascritp 处理一些 API，例如 dojo 工具包、谷歌地图 API、Arcgis API，... 我想通过 knockout 将对象绑定(bind)到 View 侧。但API有自己特定的对象。例如:

一些API:

var map = new Map();

var layer = new BaseMapLayer();
map.add(layer)

var pointLayer = new PointLayer("name", {visible: true});
map.add(pointLayer);

API 开发人员给了我一个 PointLayer 对象。我可以在构造函数中设置一些选项，例如在 map 上显示可见。我们不知道它在后台做什么。这并不重要。

PointLayer 为我们提供了两种更改可见性的方法。

pointLayer.Show();
pointLayer.Hide();

但是我们不能使用pointLayer.visibile = false或true

就像这个例子一样，我实际上想通过 knockout 来绑定(bind)对象。

var viewModel = {
     layers:[pointLayer]
} 
ko.applyBindings(viewModel);

如何将图层可见性绑定(bind)到复选框？

Answer 1

您应该扩展或包装 PointLayer 对象，以便扩展/包装器具有 writeable computed observable沿着这些思路:

var _isVisible = ko.observable(false);

pointLayer.isVisible = ko.computed({
    write: function(val) {
        _isVisible(val);
        if (!!val) { pointLayer.Show(); }
        else { pointLayer.Hide(); }
    },
    read: _isVisible;
});

_isVisible observable 有点像 isVisible“属性”的私有(private)支持字段。它保持实际状态。 (如果 pointLayer 对象确实具有用于可见性的readonly属性，那么最好只使用该属性。)。

isVisible 计算的可观察量将做两件事:

• 写入:根据新值显示或隐藏图层。
• 读取:仅返回图层的当前状态。

此可观察量可以正常绑定(bind)到复选框。