2016-06-15 17 views
0

API呼び出しのレンダリング結果のリスト(下記HTML)があり、基本的に結果の名前を取得するJS関数のKnockoutとのクリックバインドが追加されました。一致するかどうかGoogleマップマーカの配列を検索し、マップ要素上のマーカーに移動し、以前に格納されていたinfoWindowを開きます。開発ツールを開くと、ノックアウト機能を指す「クリック」アクションの要素にリスナーがあることがわかりますが、クリックすると何も起こりません。 gitHubレポがあります:https://github.com/ZackBoyd/BrewMap、これが便利で、特定のコードが以下の場合私は何か非常に基本的なものを見落としているように感じる、事前に任意のヘルプをありがとう。ノックアウトクリックバインディングJS関数の呼び出しに失敗しました

HTML

    <ul class="results list" data-bind="foreach: filteredBreweries"> 
         <li data-bind="click: $parent.goToMarker"> 
          <div class="item"> 
           <a class="image loaded"> 
            <img data-bind="attr: { src: iconImage }"> 
           </a> 
           <div class="wrapper"> 
            <h4 data-bind="text: name"></h4> 
            <figure data-bind="text: address"></figure> 
            <figure data-bind="text: yearEstablished"></figure> 
            <figure data-bind="text: type"></figure> 
           </div> 
          </div> 
         </li> 
        </ul> 

JS

function goToMarker(clickedBrewery){ 
     var clickedBreweryName = clickedBrewery.name; 
     console.log(clickedBrewery); 
     console.log(clickedBreweryName); 
     for (var key in self.mapMarkers()) { 
      if (clickedBreweryName === self.mapMarkers()[key].marker.title) { 
       map.panTo(self.mapMarkers()[key].marker.position); 
       infowindow.setContent(self.mapMarkers[key].marker.content); 
       infowindow.open(map, self.mapMarkers()[key].marker); 
      } 
     } 
    }; 

このコードは、「appViewModel」関数の範囲内である、あなたはレポでそれを見ることができ、私はすべてを含めるようにしたくありませんでしたそれは簡単のためです。

+0

こんにちは、ようこそ!あなたが現在持っているスニペットの間にコードを提供し、全体のレシピにリンクすることが一般的に期待されています。ガイダンスについては、「[mcve]」を参照してください。 (投稿を編集して改善することができます)。 – Jeroen

答えて

0

あなたのビューモデル内の変数に関数を割り当てるようにしてください。例えば:

self.goToMarker = function(clickedBrewery){ var clickedBreweryName = clickedBrewery.name; console.log(clickedBrewery); console.log(clickedBreweryName); for (var key in self.mapMarkers()) { if (clickedBreweryName === self.mapMarkers()[key].marker.title) { map.panTo(self.mapMarkers()[key].marker.position); infowindow.setContent(self.mapMarkers[key].marker.content); infowindow.open(map, self.mapMarkers()[key].marker); } } };

私はあなたのviewmodelはカントーのように見えるのか分かりません。 しかし、内部機能は私が推測するバインディングにさらされることはありません。

関連する問題