Question

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

Scenerio：

我的屏幕有一个组件和一个更新按钮。
默认情况下，该组件具有从JSON获取的一些本地数据。
点击按钮后，应用会向外部网址发送请求并获取支持数据
更新的数据应反映到组件

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

解决方法 如果我切换视图并返回，那么数据将在组件中更新。

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)();

我不相信你最后会想要额外的括号。这将丢弃您刚刚创建的可观察对象，并将其替换为创建它的平坦值。这是废话。

组件未在当前视图中更新

1 个答案: