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