Knockout.js - 取得エラー - キャッチされていないReferenceError： "with：with"バインディングを処理できません

Question

私は近所地図プロジェクトで作業中ですが、私は立ち往生しています！私はknockout.jsに新しいです。 「：関数（）{filteredItemsを返す}と」のスニペット

：72キャッチされないにReferenceError：結合処理できません

ノックアウト-3.4.1.jsは - 私はこのエラーを取得して、データバインドを使用しようとしていますHTMLソース -

section class="main"> 
      <form class="search" method="post" action="index.html" > 
      <input type="text" data-bind="textInput: filter" placeholder="Click here/Type the name of the place"> 
      <ul data-bind="with: filteredItems"> 
       <li><span data-bind="text: title, click: $parent.showInfoWindow"></span></li> 
      </ul> 
     </form> 
     </section> 

と、これは私のViewModelにある - 私はまだそれに取り組んでいますので、

function viewModel(markers) { 
    var self = this; 
    self.filter = ko.observable(''); // this is for the search box, takes value in it and searches for it in the array 
    self.items = ko.observableArray(locations); // we have made the array of locations into a ko.observableArray 
    // attributed to - http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html , filtering through array 
    self.filteredItems = ko.computed(function() { 
    var filter = self.filter().toLowerCase(); 
    if (!filter) { 
     return self.items(); 
    } else { 
     return ko.utils.arrayFilter(self.items(), function(id) { 
     return stringStartsWith(id.name.toLowerCase(), self.filter); 
     }); 
    } 

    }); 

    var stringStartsWith = function (string, startsWith) { 
     string = string || ""; 
     if (startsWith.length > string.length) 
      return false; 
     return string.substring(0, startsWith.length) === startsWith; 
    }; 
    // populateInfoWindow(self.filteredItems,) 


    // this.showInfoWindow = function(place) { // this should show the infowindow if any place on the list is clicked 
    //  google.maps.event.trigger(place.marker, 'click'); 
    // }; 

} 

一部の行をコメントしています。プロジェクト全体を見るために - https://github.com/Krishna-D-Sahoo/frontend-nanodegree-neighborhood-map

Answer 1

バインディングwithバインディングは、提供された要素で新しいバインディングコンテキストを作成します。 <span>要素内のtitleへの参照のためにエラーがスローされますが、filteredItemsにはtitleプロパティがありません。

あなたはfilteredItemsアレイ内の各要素に対して<li>要素を表示したい場合、あなたはこのように、結合foreachを使用することができます。

<ul data-bind="foreach: filteredItems"> 
    <li><span data-bind="text: title, click: $parent.showInfoWindow"></span></li> 
</ul>