对API数据使用声明性绑定

我正在创建一个工具，在地图上显示附近的兴趣点。当点击一个标记时，地图上应该会显示一个与该地标相关的WikiPedia文章列表。

我想知道是否有人能为我指明正确的方向，让ko.observable与我的API返回一起工作。我想避免像现在这样把所有内容都附加到页面上，我也认为这会导致我的信息窗口在单击另一个标记时无法正常关闭。

我尝试过的一些事情是将$wikiData.append更改为可观察的，然后更改contentString变量以包括数据绑定，但遗憾的是，它没有成功。

我使用的API是WikiPedia API。这是代码：

function mapPin(name, lat, long, text) {
    this.name = ko.observable(name);
    this.lat = ko.observable(lat);
    this.long = ko.observable(long);
    this.text = ko.observable(text);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        map: mapView,
        animation: google.maps.Animation.DROP
    });

    function toggleBounce() {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
    function article(content, url) {
        var self = this;
        self.content = content;
        self.url = url;
    }

    function apiData() {
        var wikipediaURL = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + name + '&format=json&callback=wikiCallback';
        var wikiRequestTimeout = setTimeout(function () {
            $wikiData.text ("Failed to get Wikipedia resources");
        }, 5000);
        $.ajax({
            url: wikipediaURL,
            dataType: "jsonp",
            success: function (response) {
                viewModel.articleList.removeAll();
                var articleList = response[1];
                for (var i = 0; i < articleList.length; i++) {
                    articleStr = articleList[i];
                    var url = 'http://en.wikipedia.org/wiki/' + articleStr;
                    viewModel.articleList.push(new article(articleStr, url));
                }
                clearTimeout(wikiRequestTimeout);
            }
        });
    }
    var contentString = '<!-- ko foreach: articleList --><li><a data-bind="attr: {href: url}, text: content"></a></li>';
    var infowindow = new google.maps.InfoWindow({});
    google.maps.event.addListener(mapView, 'click', function () {
        infowindow.close();
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.close();
        toggleBounce();
        infowindow = new google.maps.InfoWindow({
            content: text + contentString
        });
        infowindow.open(mapView, marker);
        apiData();
    });
}
var mapView = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(61.196148, -149.885577),
});

var viewModel = {
    articleList: ko.observableArray([]),
    pins: ko.observableArray([
        new mapPin("Alaska Communications", 61.196148, -149.885577, "test11"),
        new mapPin("Moose's Tooth", 61.190491, -149.868937, "test2")
    ]),
    // TODO
    query: ko.observable(''),

    search: function (value) {
        viewModel.pins[0].removeAll();
        for (var i in pins) {
            if (pins[i].name.toLowerCase().indexOf(valkue.toLowerCase()) >= 0) {
                this.pins.push(pins[i])
            }
        }
    }
};

// Initiates the viewModel bindings.
ko.applyBindings(viewModel);

你可以在这里找到该网站的工作版本：

http://jamesiv.es/projects/map