oracle-apex - Sunburst Oracle JET 数据绑定(bind)

Question

我正在尝试在我的 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 View 代码:

<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”错误，这是由于该行:(我想，我应该将它绑定(bind)到一个对象)document.getElementById("mysun").refresh();

硬编码 View 模型:

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

    });
}

Answer 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() 函数的情况下也能正常工作。