对API数据使用声明性绑定
Using Declarative Bindings with API Data
我正在创建一个工具,在地图上显示附近的兴趣点。当点击一个标记时,地图上应该会显示一个与该地标相关的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
您的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 -->
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- 挖空.js在数据绑定声明中分配可观察
- 循环中的闭包:在循环中声明的变量在绑定事件侦听器时未正确预设到处理程序函数中
- 声明函数并在jquery事件绑定上调用它
- 什么是声明性数据绑定
- 如何将控制事件绑定到使用javascript原型声明的函数