oracle jetアプリケーションでJSの変数をHTMLからバインドする方法はありますか？

Question

どのように私はそのような目標を達成することができますか：私は選択comboxからの選択を変更すると、それに対応して変更されます。

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？

Answer 1

：

1. が観測可能でOJ-SELECT-1の値を取得し、 '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. 、観測可能currentFlowの現在の値を取得し、：値の変更は、「updateChartが」言うとき、その値は、チャートを更新するために使用する関数の名前になります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]}); 
       } 
   } 
   

Answer 2

これはかなり簡単です。値変更イベントハンドラでは、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> 

イベントハンドラメソッドに渡される "on-value-change"属性に注目してください。このよう