0

所以我有这个问题。我正在尝试在 knockout.js 中创建一个谷歌地图搜索示例。我的视图模型如下：

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>

我面临的问题是未从获取的 JSON 中检索 lat 和 lng 字段。相反，它们按原样显示。例如，在生成的 html 源代码中，标签的 href 属性将包含 javascript:center(lat,lng) 而不是 lat lng 的数值。但是文本数据绑定字段中的“名称”项显示正确。

我猜问题在于将 key: value 对放在单引号中，但如果我删除它们，我会得到各种与 - in data-lat 属性或 . 在 data.lng 或：在 javascript:center(lat,lng); 标签 。任何帮助将非常感激。

4

1 回答 1

0

attr 标签中的值不起作用，因为它们在引号中。click另外，当您可以使用 Knockout 的绑定调用模型中的函数时，我不确定为什么需要让 href 调用 JS 函数search()。

并不是所有的代码都存在，所以我做了一些假设，但我认为这个 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>
于 2013-10-30T20:35:52.173 回答