如何在oracle jet应用程序中绑定JS中的变量？

Question

我想知道如何实现这样一个目标：当我从select combox更改选项时，pie gragh中的数据分布将相应地改变。

HTML code snippet：

<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 ？< / p>

Answer 1

这个应该非常简单。在on-value-change事件处理程序中，获取select组件的值并使用它来重置barSeries数组的值。

barSeries数组用作提供图表的observable的基础。更改阵列后，图表将自动更新以反映新数据。

由于看起来您正在使用新的JET 4.0.0自定义元素语法，因此on-value-change事件现在看起来像这样（这是以前版本的JET中的optionChange事件选项）：

<oj-select-one id="select" on-value-changed="[[valueChangedHandler]]" 
        style="max-width:20em">
        <oj-option value="Internet Explorer">Internet Explorer</oj-option>
            <oj-option value="Firefox">Firefox</oj-option>
            <oj-option value="Chrome">Chrome</oj-option>
            <oj-option value="Opera">Opera</oj-option>
            <oj-option value="Safari">Safari</oj-option>
      </oj-select-one>

注意＆＃34; on-value-change＆＃34;传递事件处理程序方法的属性。

Answer 2

像这样：

1. 在可观察的情况下获取oj-select-one的值，例如＆＃39; currentFlow＆＃39;。

2. 提供on-value-changed属性。它的值将是一个函数的名称，当值发生变化时，您将使用该函数来更新图表，例如＆quot; updateChart＆＃39;：

   <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. 在＆＃39; updateChart＆＃39;内函数，获取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]});
       }
   }