我正在尝试在我的APEX Web应用程序中使用Oracle JET sunburst。我希望我的旭日根据开关的切换来更改标签(语言(。
每次切换时，都会触发 Ajax 调用，并返回相应的 JSON 结果。
我可以验证切换开关后，JSON 文件返回相应的语言内容，但问题是只有内核节点的标签会改变，其余的将保持原样(以前的语言(。
视图模型的代码：
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 函数，并将其替换为下面的硬编码行。我收到"这是空"的错误，这是由于以下行：(我认为，我应该将其绑定到对象( 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));
});
});
}
不错的收获！
这似乎是一个错误，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 周前解决问题，因此我没有检查堆栈溢出。我在甲骨文社区上发布了以下内容：
我偶然发现了这个问题。它来自以下代码行：
self.sunburstData = new ArrayTreeDataProvider(self.jsonData， {keyAttributes： 'id'， childrenAttribute： "nodes"}(;
我把"id"作为键属性而不是"标签"。由于当我们更改语言时，ids将保持不变，只有标签会更改，因此OJET代码无法识别刷新旭日图的需要。这会导致行为不当，并且只会更新内核节点的标签。(我认为OJET团队应该解决这个问题(。
更改后：键属性："标签"，它完美运行。但它在我的情况下引入了另一个问题。我首先将 keyAttributes 设置为"id"而不是"label"的原因是我的标签不是唯一的，并且在钻取过程中会导致命名空间冲突。
只是一个小反馈： 调用 refresh(( 或不调用它，这不是问题！