如何在oracle jet應用程序中從HTML中綁定變量？

我想知道我該如何實現這樣一個目標：當我改變選擇combox的選擇時，gra gragh中的數據分佈會相應地改變。如何在oracle jet應用程序中從HTML中綁定變量？

的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-選項值並用它作爲JS的條件來改變變量barSeries？

來源

2017-10-10 Elva

像這樣：

獲取OJ選一的可觀察到的，說「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觀察到的電流值，並相應地更改您的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]}); 
    } 
}

來源

2017-10-10 17:18:19 Ray

非常感謝，對此的解釋是清晰和易於理解。 – Elva

我們可以在HTML中使用數據綁定而不是添加on-value-changed屬性嗎？如何直接在JS中反映value =「{{currentFlow}}」？ – Elva

@Elva是的，我們可以通過在currentFlow上使用'subscribe'函數。 – Ray

這個應該是非常簡單的。在值更改事件處理程序中，獲取select組件的值並使用它重置barSeries數組的值。

barSeries數組用作饋送圖表的可觀察值的基礎。一旦更改數組，圖表將自動更新以反映新數據。

由於看來您使用的是新的JET 4.0.0自定義元素語法，按數值變化事件，現在看起來是這樣的（這是在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>

注意傳遞事件處理函數方法的「值改變」屬性。

來源

2017-10-10 16:16:49 peppertech

如何在oracle jet應用程序中從HTML中綁定變量？

回答

相關問題