knockoutjs結合不同的API對象

我正在一些API與像Dojo工具，谷歌地圖API時，ArcGIS API，... 我要綁定的對象通過淘汰賽查看側javascritp。但API有自己的特定對象。例如：knockoutjs結合不同的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);

如何將圖層可見性綁定到複選框？

來源

2014-02-18 barteloma

您應該延長或包裹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觀察到的是有點像爲isVisible「財產」的私人支持字段。它保持了實際的狀態。（如果pointLayer對象確實有只讀屬性的可視性，最好只使用一個）。

的isVisible計算觀察到會做兩件事情：

寫：顯示或隱藏取決於新的價值層。
閱讀：剛剛返回圖層的當前狀態。

此可觀察到可正常結合於複選框。

來源

2014-02-18 08:42:54 Jeroen

假設你正在構建的內容或東西表打開和關閉圖層有一個複選框，你應該能夠每個對象的可視屬性綁定在陣列中的複選框。

你可以建立你的視圖模型構造函數來創建與觀測爲您要使用每種類型，然後將每個對象添加到陣列層的屬性的對象。然後，您可以將複選框綁定到可觀察數組中每個圖層對象的可見可見性。

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

要使用其他對象類型，只需添加代碼來創建另一個對象與您需要的observables。在視圖模型中使用通用名稱可以掩蓋不同對象和不同API之間的差異。

來源

2014-02-19 20:26:46

knockoutjs結合不同的API對象

回答

相關問題