对 API 数据使用声明性绑定

Question

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

我想知道是否有人可以为我指明正确的方向，让我 ko.observables 与我的 API return 一起工作。我想避免像现在这样将所有内容附加到页面，我也相信这会导致我的信息出现一些问题 windows 在单击另一个标记时无法正确关闭。

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

我用的API是维基百科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

Answer 1

您的 articleList 应该是视图模型中的一个 observableArray，并在视图中为此绑定。

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")
    ]),
};

先做一个小DTO：

function article(content, url) {
  var self = this;
  self.content = content;
  self.url = url;
}

当您从我们的 ajax 调用中取回数据时，首先清除数组：

viewModel.articleList.removeAll();

然后循环执行如下操作：

viewModel.articleList.push(new article(articleStr, url));

使用如下绑定在您的视图中进行格式化：

<!-- ko foreach: articleList -->
<li><a data-bind="attr: {href: url}, text: content"></a></li>
<!-- /ko -->

对 API 数据使用声明性绑定

Using Declarative Bindings with API Data

javascript

jquery

google-maps

wikipedia-api

knockout.js