KnockoutJS不更新dom - 與Googlemaps api交互

Question

我使用knockoutJS作爲我的udacity課程，而且我似乎無法更新我的DOM的一部分。

我正在與google maps API進行交互。我有一個observableArray，其中包含具有一些內容的位置的對象以及包含值true或false的「show」元素。 現在observableArray正在更新（它基於標記是否在可見地圖的範圍內），但它並沒有更新我的DOM，因爲它只能列出可見位置的標記標題。

this.locations = ko.observableArray([{ 
       title: 'Camden Brookwood', 
       location: { 
        lat: 33.8027355, 
        lng: -84.3973864 
       }, 
       content: "Camden Brookwood, Rank: 1", 
       show: true 
      }, 
      { 
       title: 'Monroe Place', 
       location: { 
        lat: 33.8092084, 
        lng: -84.370107 
       }, 
       content: "Monroe Place, Rank: 2", 
       show: true 
      }, 
      { 
       title: 'Capitol Gateway', 
       location: { 
        lat: 33.7453517, 
        lng: -84.384106 
       }, 
       content: "Capitol Gateway, Rank: 3", 
       show: true 
      }, 
      { 
       title: 'Gables 820 West', 
       location: { 
        lat: 33.7808463, 
        lng: -84.4162514 
       }, 
       content: "Gables 820 West, Rank: 4", 
       show: true 
      }, 
      { 
       title: 'Montage Embry Hills', 
       location: { 
        lat: 33.8827244, 
        lng: -84.2480548 
       }, 
       content: "Montage Embry Hills, Rank: 5", 
       show: true 
      } 
     ]); 

以下是更新這些值

google.maps.event.addListener(map, 'tilesloaded', function() { 
     for(var i = 0; i < locations().length; i++) { 
     if(map.getBounds().contains(locations()[i].location)) 
     locations()[i].show = true; 
     else { 
      locations()[i].show = false; 
     } 
     } 
    }); 

下面是相關的部分使用「如果」數據 - 的DOM

<div data-bind="foreach: locations"> 
     <div class="mini-container" data-bind="visible: show"> 
     <div data-bind="text: show"></div> 
     </div> 
    </div> 

我也試過代碼綁定。

Answer 1

在每個對象的show屬性需要可觀察到，即

ko.observableArray([{ 
    title: 'Camden Brookwood', 
    location: { 
    lat: 33.8027355, 
    lng: -84.3973864 
    }, 
    content: "Camden Brookwood, Rank: 1", 
    show: ko.observable(true) 
}]) 

，然後用

更新

locations()[i].show(false) 

作爲由文檔指出...

「關鍵點：一個observableArray軌道哪些對象是在陣列中，這些對象

乾脆把一個對象到observableArray並不的不是狀態使所有對象的屬性都可以被觀察到。當然，如果你願意，你可以讓這些屬性可觀察，但這是一個獨立的選擇。一個observableArray只跟蹤的對象其持有，而當對象被添加或刪除通知偵聽。」

http://knockoutjs.com/documentation/observableArrays.html

Answer 2

你有什麼接近工作，你必須確保將標記的show屬性綁定到foreach或任何你在dom上使用的。

的jsfiddle：https://jsfiddle.net/timh06/659zp473/

基本上，我轉換您的緯度經度谷歌地圖經緯度對象，並固定了淘汰賽綁定。

HTML：

<div data-bind="foreach: locations"> 
    <!-- ko if: show --> 
    <h3 data-bind="text: content"></h3> 
    <!-- /ko --> 
</div> 

JS：

// add markers 
var markers = []; 
for (var i = 0; i < vm.locations().length; i++) { 
    var loc = vm.locations()[i]; 
    var marker = new google.maps.Marker({ 
     position: loc.location, 
     map: map, 
     visible: loc.show, 
     title: loc.title 
    }); 
    markers.push(marker); 
} 

google.maps.event.addListener(map, 'idle', function() { 
    var bounds = map.getBounds(); 
    for (var i = 0; i < vm.locations().length; i++) { 
     var marker = vm.locations()[i]; 
     if (bounds.contains(marker.location)) { 
      marker.show(true); 
     } else { 
      marker.show(false); 
     } 
    } 
});