Javascript 剔除：未检索attr:标记中的值

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

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属性或相关的各种无效take-found错误。在data.lng或javascript:center（lat，lng）中；标签。

---

非常感谢您的帮助。

attr标记中的值不起作用，因为它们在引号中。另外，我不知道为什么需要href call a JS函数，因为您可以使用Knockout的

单击
绑定来调用
搜索（）
模型中的函数

并不是所有的代码都存在，所以我做了一些假设，但我认为这个JS小提琴可以满足您的需要。

我稍微修改了你的代码，但是你可能需要更多的信息

JS:

HTML:

您的答复没有解决我的问题，但确实帮助我找到了解决方案。我在标记中使用了href属性，因为我想创建超链接。然而，我通过使用按钮实现了相同的功能，而且效果很好！所以欢呼：）
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();
});

<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>