javascript - 如何在 oracle jet 应用程序中从 HTML 绑定(bind) JS 中的变量？

Question

我想知道我怎样才能实现这样的目标:当我从选择组合框中更改选择时，饼图中的数据分布将相应改变。

HTML 代码片段:

<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>

JS 代码片段:

var barSeries = [{name: "field1", items: [90, 34]},
   {name: "field2", items: [55, 30]},
   {name: "field3", items: [36, 50]},
   {name: "field4", items: [22, 46]},
   {name: "field5", items: [60, 46]}];
self.barSeriesValue = ko.observableArray(barSeries); 

简单来说，问题应该是:如何从HTML中获取oj-option的值，并在JS中作为条件来改变变量barSeries？

Answer 1

像这样:

1. 在可观察对象中获取 oj-select-one 的值，例如“currentFlow”。

2. 提供一个on-value-changed 属性。它的值将是您将在值更改时用于更新图表的函数的名称，例如“updateChart”:

   <oj-select-one id="basicSelect" value="{{currentFlow}}" on-value-changed="
   [[updateChart]]" >
       <oj-option value="flow1">Flow1</oj-option>
       <oj-option value="flow2">Flow2</oj-option>
       <oj-option value="flow3">Flow3</oj-option>
   </oj-select-one>
   

3. 在“updateChart”函数中，获取可观察的 currentFlow 的当前值，并相应地更改 observableArray barSeriesValue 的值。

   self.updateChart = function(){
       if (self.currentFlow() == 'flow1'){
           self.barSeriesValue.push({name:'field6',items:[70,22]});
       }
       if (self.currentFlow() == 'flow2'){
           self.barSeriesValue.pop();
       }
       if (self.currentFlow() == 'flow3'){
           self.barSeriesValue.push({name:'field6',items:[30,52]});
       }
   }