组件未在当前视图中更新

Question

正在开发基于 Javascript 的混合应用程序，它使用 require.js 和敲除。

场景：

我的屏幕有一个组件和一个更新按钮。
默认情况下组件有一些本地数据，从JSON.
点击按钮后，应用程序将向外部发出请求 URL 并获取返回数据
更新的数据应该反映到组件

问题： 我能够正确地看到我的组件上的虚拟数据。单击按钮时，数据会从服务器正确获取，但视图不会更新。可能是什么原因和可能的解决方案？

解决方法 如果我切换视图并返回，则组件中的数据会更新。

define(['text!../seriesOneData.json', 'knockout', 'jquery', 'appController', 'ojs/ojtimeline'],
        function (file,  ko, $, app) {

            function DashboardViewModel() {
                var self = this;
                self.currentDateString = "Feb 1, 2010";
                self.currentDate = new Date(self.currentDateString).getTime();
                var content = JSON.parse(file);
                self.series = ko.observableArray(content)();
                self.buttonClick = function () {
                    console.log('button clicked');
                    var settings = {

                        "url": "http://www.oracle.com/webfolder/technetwork/jet/cookbook/dataVisualizations/timeline/basicTimeline/seriesOneData.json",
                        "method": "GET"
                    };
                    $.ajax(settings).done(function (response) {
                        console.log(response);
                        self.series = response;
                        console.log(self.series);
                        
                    });
                }
      );

    <div id="tline"
         data-bind='ojComponent: {
  component: "ojTimeline",
  minorAxis: {
  scale: "weeks",
    zoomOrder: ["months", "weeks", "days"]
  },
  majorAxis: {
    scale: "quarters"
  },
  start: new Date("Jan 1, 2010").toISOString(),
  end: new Date("Dec 31, 2010").toISOString(),
  selectionMode: "single",
  referenceObjects: [{value: currentDate}],
  selection: ["e4"],
  series: [{ 
    id: "s1",
    emptyText: "No Data.",
    items: series,
    label: "Oracle Events"
  }],
  overview: {
    rendered: "off"
  }                                         
},
attr: {"aria-label": "Single Series Timeline Demo. Current date is " + currentDateString}'
         style="width: '100%';height: 380px"></div>
         <button id= "button"
            data-bind="click: buttonClick, 
                       ojComponent: { component: 'ojButton', label: 'Update Events' }">         
         
         </div>        
</div>

Answer 1

您正在覆盖您自己的可观察对象而不是更新它的值

$.ajax(settings).done(function (response) {
    self.series = response;
    ...
}

应该是：

$.ajax(settings).done(function (response) {
    self.series(response);
    ...
}

当然你也在第一次创建 observable 的地方做了一些奇怪的事情：

self.series = ko.observableArray(content)();

我不相信你想要最后的额外括号。这将丢弃您刚刚创建的 observable 并将其替换为创建它的平面值。胡说八道。

组件未在当前视图中更新

Component not updating in the current view

html

javascript

jquery

requirejs

knockout.js