将 Oracle Jet oj 时间轴组件绑定到 viewModel答案

【问题标题】：Bind OracleJet ojtimeline component to viewModel将 Oracle Jet oj 时间轴组件绑定到 viewModel
【发布时间】：2016-05-26 13:44:06
【问题描述】：

我试图了解如何将数据从视图模型绑定到视图。对后端的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;
        });

【问题讨论】：

标签： javascript jquery knockout.js oracle-jet

【解决方案1】：

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

【讨论】：

是的，statusArray 现在在视图中是已知的，但时间线是空的。刷新无效。
如果您更新上面的代码以完全反映当前状态，那就太好了。控制台中是否有任何错误？我评论中的方法在食谱中效果很好
更新了代码，剩下的问题是timeline组件无法识别我猜的数组中的数据。
谢谢，你确定 for 循环可以正常工作吗？您是否对其进行了调试以确保“statusArray”包含预期的数据？顺便说一句，您需要像我之前写的那样调用刷新...

【解决方案2】：

我已经从 Ajax 数据中加载了ojTimeline，并且从来不需要使用刷新。最坏的情况是，您可以将 ojTimeline 包装在  中，这样在您收到 Ajax 响应之前时间线不会出现。

对于ojTimeline items 属性，我不得不像这样解开可观察对象，而不是引用可观察对象：items: ko.toJS(statusArray)。

要考虑的另一件事是在for 循环内推入ko.observableArray。使用ko.observableArraypush() 方法的每次推送都会调用订阅。如果您的数组绑定到 UI，那么每次推送都会触发 DOM 更改。相反，通常最好推入底层数组（解包数组）然后调用self.statusArray.valueHasMutated。您可能还想留意您对this、self 的使用，什么都没有。一致性将有助于避免像已识别的一个 ladar 这样的错误。

您如何看待像这样重写您的 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;
    };
  });
);

【讨论】：