我试图了解如何将视图模型中的数据绑定到视图。对后端的REST
请求工作正常,我得到一个包含多个项目的JSON数组。现有的documentation并没有给我足够的帮助。
如何将时间轴组件ojtimeline
绑定到视图模型数据数组?
编辑:现在没有错误,因为视图识别视图模型数组。但ojtimeline
不显示数据,只显示工作的空视图组件。
查看
<div id="tline"
data-bind='ojComponent: {
component: "ojTimeline",
minorAxis: {
scale: "hours",
zoomOrder: ["hours", "days", "weeks"]
},
majorAxis: {
scale: "weeks"
},
start: new Date("Jan 1, 2016").toISOString(),
end: new Date("Jun 31, 2016").toISOString(),
referenceObjects: [{value: new Date("Feb 1, 2010").toISOString()}],
series: [{
id: "id",
emptyText: "No Data.",
items: statusArray,
label: "Oracle Events"
}],
overview: {
rendered: "off"
}
}' style="width: '100%';height: 350px"></div>
查看模型
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojtimeline'],
function (oj, ko) {
/**
* The view model for the main content view template
*/
function timelineContentViewModel() {
var self = this;
this.statusArray = ko.observableArray([]);
self.addData = function () {
$.ajax({
url: "http://localhost:8080/myproject/rest/status/v1/findAll",
type: 'GET',
dataType: 'json',
success: function (data, textStatus, jqXHR) {
var x = data;
for (i = 0; i < x.length; i++) {
statusArray.push({
id: data[i].id,
description: data[i].text,
title: data[i].user.screenName,
start: data[i].createdAt});
}
//$("#tline").ojTimeline("refresh"); Doesn't have ant affect
}
});
};
self.addData();
}
return timelineContentViewModel;
});
答案 0 :(得分:0)
ReferenceError由
引起 var statusArray = ko.observableArray([]);
应该是
this.statusArray = ko.observableArray([])
当可观察数组发生变化时,你也可能(可能)需要刷新时间线,例如:在成功回调的for循环之后:
...
success: function (data, textStatus, jqXHR) {
var x = data;
for (i = 0; i < x.length; i++) {
self.statusArray.push({
id: data[i].id,
description: data[i].text,
title: data[i].user.screenName,
start: data[i].createdAt});
}
$("#tline").ojTimeline("refresh");
}
...
答案 1 :(得分:0)
我已从Ajax数据加载ojTimeline
,并且从未需要使用刷新。最糟糕的情况是,您可以将ojTimeline
包装在<!-- ko if ... -->
中,这样在您收到Ajax响应之前,时间轴就不会出现。
对于ojTimeline
items
属性,我不必引用observable,而是打开这样的observable:items: ko.toJS(statusArray)
。
要考虑的另一件事是在ko.observableArray
循环中推进for
。使用ko.observableArray
push()
方法的每次推送都会调用订阅。如果您的数组绑定到UI,则每次推送都将触发DOM更改。相反,通常最好是推入底层数组(解包数组),然后调用self.statusArray.valueHasMutated
。您可能还需要密切关注this
,self
的使用情况。一致性将有助于避免像识别出的一个小伙伴那样的错误。
你怎么看待像这样重写你的for循环(未经测试的代码)?
ko.utils.arrayPushAll(
self.statusArray(),
ko.utils.arrayMap(data, function(item) {
return {
id: item.id,
description: item.text,
title: item.user.screenName,
start: item.createdAt;
};
});
);
self.statusArray.valueHasMutated();
或者,如果你可以逃脱它(一些OJ组件不喜欢这种方法),你可以跳过推送,只需替换observable中的整个数组:
self.statusArray(
ko.utils.arrayMap(data, function(item) {
return {
id: item.id,
description: item.text,
title: item.user.screenName,
start: item.createdAt;
};
});
);