2013-10-30 2 views
0

그래서이 문제가 있습니다. knockout.js에서 Google지도 검색 예제를 만들려고합니다. 다음과 같이 내 뷰 모델은 다음과 같습니다녹아웃 : attr 값 : retrived 태그가 없습니다.

function search() { 
    var self = this; 
    self.loc = ko.observable(); 

    self.load = function() { 
     $.getJSON("http://ws.geonames.org/searchJSON?q=" + $('#q').val() + "&maxRows=10",self.loc); 

    self.centre = function (lat,lng){ 
    var point = new GLatLng(lat,lng); 
    map.setCenter(point,13); 
} 

    } 


$(document).ready(function(){ 
    ko.applyBindings(new search()); 
}); 

function center(lat,lng){ 
    var point = new GLatLng(lat,lng); 
    map.setCenter(point,13); 
} 

을 그리고보기는 다음과 같습니다 :

<div data-bind="with: loc"> 
    <div data-bind="foreach: geonames"> 
     <a data-bind="text: name, attr: { 'data-lat': 'lat', 'data.lng': 'lng', 'href': 'javascript:center(lat,lng);' }"></a> 

    </div> 
</div> 

내가 직면하고 문제는 위도와 LNG 필드가 가져온 JSON에서 검색되지 않는 것입니다. 대신 결과 HTML 소스에서와 같이 표시됩니다. 예를 들어 결과 html 소스에서 태그의 href 속성에는 lat lng의 숫자 값 대신 javascript : center (lat, lng)가 포함됩니다. 그러나 텍스트 데이터 바인딩 필드의 '이름'항목이 올바르게 표시됩니다.

키를 넣는 것이 맞습니다 : 작은 따옴표로 된 값 쌍을 제거했지만 여러 가지 잘못된 가져 오기 오류가 발생했습니다. - data-lat 특성 또는. in data.lng 또는 : in javascript : center (lat, lng); 태그. 도움이 될 것입니다.

답변

0

attr 태그의 값은 따옴표로 묶어서 작동하지 않습니다. 또한 knockout의 click 바인딩을 사용하여 search() 모델의 함수를 호출 할 때 href 호출에서 JS 함수를 호출해야하는 이유가 확실하지 않습니다.

코드가 전부는 아니기 때문에 몇 가지 가정을했지만이 JS Fiddle이 원하는대로 처리합니다. http://jsfiddle.net/KQrEF/1/

코드를 약간 변경했지만 정보가 더 필요할 수도 있습니다.

JS :

function search() { 
    var self = this; 
    self.loc = ko.observable(); 

    self.load = function() { 
     //I hardcoded 10 here because whatever you were using wasn't present in what you posted. 
     $.getJSON("http://ws.geonames.org/searchJSON?q=" + '10' + "&maxRows=10", self.loc); 
    }; 

    self.centre = function (lat, lng, loc) { 
     //logging these to show that it gets what you want 
     console.log('lat',lat); 
     console.log('lng',lng); 
     console.log('loc',loc); 
     //errors here because GLatLng isn't in what you posted 
     var point = new GLatLng(lat, lng); 
     map.setCenter(point, 13); 

    }; 

} 

$(document).ready(function() { 
    //creating a variable search so we can call search.load() later 
    search = new search(); 
    ko.applyBindings(search); 
    search.load(); 
}); 

HTML :

<div data-bind="with: loc"> 
    <div data-bind="foreach: geonames"> 
     <a href="#" data-bind="click: $root.centre.bind($data,lat,lng), text: name"></a> 

    </div> 
</div> 
+0

회신이 내 질문에 해결되지 않았다하지만 해결책에 도달 도와 않았다. 내가 하이퍼 링크를 만들고 싶었 기 때문에 태그에 href 속성을 사용했습니다. 그러나 버튼을 사용하여 동일한 기능을 달성했고 효과가있었습니다! 그래서 응원 :) –