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

Question

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

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

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

barSeries 数组用作提供图表的可观察对象的基础。更改数组后，图表将自动更新以反映新数据。

由于您使用的似乎是新的 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>

注意传递给事件处理程序方法的 "on-value-change" 属性。

Answer 2

像这样：

获取 oj-select-one 在 observable 中的值，比如 'currentFlow'。

提供一个 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>

在 'updateChart' 函数中，获取 currentFlow observable 的当前值，并相应地更改 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]});
    }
}

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

How to bound the variable in JS from HTML in oracle jet application?

javascript

oracle-jet