Question

所以我有这个问题。我想在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对放在单引号中，但是如果我删除它们，我得到各种无效的被发现的错误 - 在data-lat属性或。在data.lng或：在javascript：center（lat，lng）;标签。任何帮助都会非常感激。

Answer 1

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

Knockout：attr中的值：标签未被检索

1 个答案: