Question

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

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

Answer 2

我已从Ajax数据加载ojTimeline，并且从未需要使用刷新。最糟糕的情况是，您可以将ojTimeline包装在中，这样在您收到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;
    };
  });
);

将OracleJet ojtimeline组件绑定到viewModel

2 个答案: