Sunburst Oracle JET 数据绑定答案

【问题标题】：Sunburst Oracle JET Data BindingSunburst Oracle JET 数据绑定
【发布时间】：2020-03-28 02:54:22
【问题描述】：

我正在尝试在我的 APEX Web 应用程序中使用 Oracle JET sunburst。我希望我的 sunburst 根据切换开关来更改标签（语言）。

每次切换开关时，都会触发一个 Ajax 调用并返回相应的 JSON 结果。

我可以验证切换开关后，JSON文件返回相应的语言内容，但问题是只有内核节点的标签会改变，其余的将保持原样（以前的语言）。

ViewModel 的代码：

function sunburstDraw(process_name, sunburst_id, lang){
     require(['knockout', 'ojs/ojbootstrap', 'ojs/ojarraytreedataprovider','ojs/ojknockout-keyset', 'ojs/ojknockout', 'ojs/ojsunburst', 'ojs/ojbutton'],

     function(ko, Bootstrap, ArrayTreeDataProvider, keySet) {
          function SunburstModel() {
              var self = this;                                      
              self.langValue = ko.observable(lang);                                                                  
              self.jsonData = ko.observableArray();
              self.sunburstData = new ArrayTreeDataProvider(self.jsonData, {keyAttributes: 'id', childrenAttribute: "nodes"});

              ko.computed(function() {
                apex.server.process(
                        "sunburstData",
                        {x01: self.langValue()},
                        {
                         dataType: "text",
                         success:function(pData)
                         {
                          self.jsonData(JSON.parse(pData));                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                          document.getElementById("mysun").refresh();
                         }                                                      
                        }                                                                                                             
                   );

              }).extend({ deferred: true });   
            };

      var sunburstModel = new SunburstModel();             
      Bootstrap.whenDocumentReady().then(
           function() {
              ko.applyBindings(sunburstModel, document.getElementById(sunburst_id));
           });

    });

}

HTML 视图代码：

<div id='sunburst_container'>
    <oj-buttonset-one class="oj-buttonset-width-auto" value="{{langValue}}">
         <oj-option value="EN">EN</oj-option>
         <oj-option value="FA">FA</oj-option>      
    </oj-buttonset-one>

    <oj-sunburst id="mysun"
        data="[[sunburstData]]">
        <template slot='nodeTemplate'>
           <oj-sunburst-node
               label='[[$current.data.label]]'
               value='[[$current.data.val]]'>
           </oj-sunburst-node>
        </template>
    </oj-sunburst>
</div>

第二次尝试：

为了摆脱异步 Ajax 调用的复杂性，我删除了 apex.server.process 函数并将其替换为下面的硬编码行。我收到“This is null”的错误，这是由于该行：（我认为，我应该将它绑定到一个对象） document.getElementById("mysun").refresh();

硬编码视图模型：

function sunburstDraw(process_name, sunburst_id, lang){
     require(['knockout', 'ojs/ojbootstrap', 'ojs/ojarraytreedataprovider','ojs/ojknockout-keyset', 'ojs/ojknockout', 'ojs/ojsunburst', 'ojs/ojbutton'],

     function(ko, Bootstrap, ArrayTreeDataProvider, keySet) {
          function SunburstModel() {
              var self = this;                                      
              self.langValue = ko.observable(lang);                                                                  
              self.jsonData = ko.observableArray();
              self.sunburstData = new ArrayTreeDataProvider(self.jsonData, {keyAttributes: 'id', childrenAttribute: "nodes"});

              ko.computed(function() {
               if(self.langValue() == "EN")
                   self.jsonData([{"label":"Iran", "id":"1", "val":34, "nodes":[{"label":"Tehran", "id":"2", "val":31, "nodes":[]}]}]);                                
               else
                   self.jsonData([{"label":"ایران", "id":"1", "val":34, "nodes":[{"label":"تهران", "id":"2", "val":31, "nodes":[]}]}]);
               document.getElementById("mysun").refresh();                                                                     

              }).extend({ deferred: true });   
            };

      var sunburstModel = new SunburstModel();             
      Bootstrap.whenDocumentReady().then(
           function() {
              ko.applyBindings(sunburstModel, document.getElementById(sunburst_id));
           });

    });
}

【问题讨论】：

嗨@vas，如果这个答案解决了您的问题，请考虑通过单击复选标记并投票来接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己赢得了一些声誉

标签： oracle-apex sunburst-diagram oracle-jet

【解决方案1】：

不错的收获！

这似乎是一个错误，self.jsonData() 没有完全更新为新值。我可以通过在 ko.computed 函数的开头添加self.jsonData([]); 来解决。

ko.computed(function() {

    self.jsonData([]);

    if(self.langValue() == "EN")
       self.jsonData([{"label":"Iran", "id":"1", "val":34, "nodes":[{"label":"Tehran", "id":"2", "val":31, "nodes":[]}]}]);                                
    else
       elf.jsonData([{"label":"ایران", "id":"1", "val":34, "nodes":[{"label":"تهران", "id":"2", "val":31, "nodes":[]}]}]);                                                                    

}).extend({ deferred: true });

顺便说一句，没有refresh() 函数，该组件也能正常工作。

【讨论】：

【解决方案2】：

很抱歉回复晚了，感谢您的帮助。两周前我能够解决这个问题，因此我没有检查stackoverflow。我在 Oracle 社区发布了以下内容：

我很幸运地发现了这个问题。它来自这行代码：

self.sunburstData = new ArrayTreeDataProvider(self.jsonData, {keyAttributes: 'id', childrenAttribute: "nodes"});

我将“id”作为 keyAttributes 而不是“label”。由于当我们更改语言时，id 将保持不变，只有标签会更改，因此 OJET 代码无法识别需要刷新旭日形图。这会导致错误行为，并且只会更新内核节点的标签。（我认为 OJET 团队应该解决这个问题）。

修改后：keyAttributes: 'label'，效果完美。但它在我的案例中引入了另一个问题。我首先将 keyAttributes 设置为 'id' 而不是 'label' 的原因是我的标签不是唯一的，并且在钻取过程中会导致命名空间冲突。

只是一个小反馈：调用 refresh() 或不调用，这不是问题！

【讨论】：