javascript - 组件未在当前 View 中更新

Question

基于 Javascript 的混合应用程序，它使用 require.js 和 knockout。

场景:

• 我的屏幕有一个组件和一个更新按钮。

• 默认情况下，组件有一些从 JSON 获取的本地数据。

• 单击按钮后，应用程序将向外部 URL 发出请求并获取 返回数据
• 更新的数据应反射(reflect)到组件

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

解决方法 如果我切换 View 并返回，那么组件中的数据就会更新。

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

当然，在首次创建可观察对象时，您也会做一些奇怪的事情:

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

我不相信您想要在末尾添加额外的括号。这将丢弃您刚刚创建的可观察值，并将其替换为创建它的固定值。这是废话。