数据订阅Knockout ObservableArray但显示空数组

时间:2018-06-12 23:49:22

标签: javascript knockout.js knockout-mvc

我是javascript的新手。我无法从ObservableArray位置打印数据。数据绑定工作,我可以从视图中的ObservableArray位置列出数据,但无法在控制台上打印出来。我已经在这几个小时了,任何帮助将不胜感激。谢谢

以下是ViewModel

    let MapViewModel = function() {

let map
let geocoder;
let self = this;

self.location = ko.observableArray([]);

for (let i = 0; i < locationList.length; ++i) {
  self.location.push(new Location(locationList[i]));
}

console.log(this.location()); // Location, Location, Location, Location, Location, Location, Location]
console.log(this.location()[0].name); //  Location {name: ƒ, address: ƒ} ...
console.log(this.location().length); //length is 7

}

let Location = function(data) {
this.name = ko.observable(data.name);
this.address = ko.observable(data.address);


}

  ko.applyBindings(new MapViewModel());

这是绑定代码`

  <div class="menu_item_container">
    <h1>Neighborhood Map</h1>
    <input type="text" id="search" data-bind= 'value:filterLocations, valueUpdate: 'afterKeyDown',value:filterLocations' placeholder="Search Locations...">
    <hr>
    <nav id=nav>
      <ul data-bind='foreach:location'>
        <li data-bind="text:name"></li>
      </ul>
    </nav>
  </div>

LocationList

  let locationList = [{
  name: 'Brooklyn Museum',
  address: '200 Eastern Pkwy, Brooklyn, NY 11238'
}, {
  name: 'Empire State Building',
  address: '350 5th Ave, New York, NY 10118'
}, {
  name: 'Statue of liberty',
  address: 'New York, NY 10004'
}, {
  name: 'Rockefeller Center',
  address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
  name: 'Brooklyn Bridge',
  address: 'Brooklyn Bridge, New York, NY 10038'
},
{
  name: 'Time Square',
  address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
  name: 'World Trade Center',
  address: '285 Fulton St, New York, NY 10007'
},
  ];

1 个答案:

答案 0 :(得分:1)

这可以将observable解包为常规js并将其转换为单个字符串(如果需要)然后你可以打印它控制台:

let locationsJSON = ko.toJS(self.location);
let locationsString = JSON.stringify(locationsJSON);