javascript - 将声明性绑定(bind)与 API 数据结合使用

Question

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

我想知道是否有人可以为我指出正确的方向，让 ko.observables 使用我的 API 返回。我想避免像现在这样将所有内容附加到页面上，我还相信这会导致单击另一个标记时我的信息窗口无法正确关闭的一些问题。

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

我使用的 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

Answer 1

您的articleList应该是 View 模型中的一个observableArray，并在 View 中进行绑定(bind)。

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

使用如下绑定(bind)在 View 中进行格式化:

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