Question

我正在使用javascritp开发一些API，例如dojo toolkit，google maps API，Arcgis API，...... 我想通过击倒将对象绑定到视图侧。但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对象。我可以在构造函数中设置一些选项，如在地图上显示可见。我们不知道背景是什么。这并不重要。

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

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

但我们无法使用pointLayer.visibile = false or true

就像这个stuation一样，我想用挖空来实际绑定对象。

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

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

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“属性”的私有支持字段。它保持实际状态。（如果pointLayer对象具有 readonly 属性以供查看，则最好只使用该属性。）。

isVisible计算的observable将做两件事：

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

这个observable可以正常绑定到一个复选框。

Answer 2

假设您正在使用复选框构建目录或某些内容来打开和关闭图层，您应该能够将数组中每个对象的可见属性绑定到复选框。

您可以构建视图模型构造函数，以便为要为每种类型使用的属性创建一个带有observable的对象，然后将每个对象添加到layers数组中。然后，您可以将复选框绑定到可观察数组中每个图层对象的可见observable。

var viewModel = function ( inputLayerArray ) {
    var that = this;
    var layerArray = inputLayerArray || [];
    this.layers = ko.observableArray();
    if ( layerArray.length > 0 ) {
        ko.utils.arrayForEach( layerArray, function ( item ) {
            if (item instanceof PointLayer) {
                that.layers.push( {
                    name: item.name,
                    visible: item.visible
                } );
            }
        } );
    }

    function getLayerByName( layerName ) {
        return ko.utils.arrayFilter( layerArray, function ( item ) {
            return item.name === layerName;
        } );
    }

    function hideLayer( layerName ) {
        var layers = getLayerByName( layerName );
        if ( layers.length > 0 ) {
            layers[0].HideLayer();
        }
    }

    function showLayer( layerName ) {
        var layers = getLayerByName( layerName );
        if ( layers.length > 0 ) {
            layers[0].ShowLayer();
        }
    }

    this.toggleLayer = function( data ) {
        if ( data.visible( ) === true ) {
            showLayer( data.name ); 
        } else {
            hideLayer( data.name );
        }
    };
};

要使用其他对象类型，只需添加代码以使用您需要的可观察对象创建另一个对象。在视图模型中使用通用名称可以掩盖不同对象和不同API之间的差异。

knockoutjs绑定不同的API对象

2 个答案: