Oracle Jet 응용 프로그램에서 JS의 변수를 HTML에서 바인딩하는 방법은 무엇입니까?

Question

나는 어떻게 이러한 목표를 달성 할 수 있을지 의문이다 : select combox에서 선택을 변경할 때, pie gragh의 데이터 분포가 그에 따라 변경 될 것이다.

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 --하나를 선택 관측의 말 '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

이것은 아주 간단합니다. on-value-change 이벤트 핸들러에서 select 구성 요소의 값을 가져 와서 barSeries 배열의 값을 재설정합니다.

barSeries 배열은 차트를 공급하는 관찰 가능 항목의 기초로 사용됩니다. 배열을 변경하면 차트가 자동으로 업데이트되어 새 데이터를 반영합니다.

<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> 

:

당신이 새로운 JET 4.0.0 사용자 정의 요소 구문을 사용하는 보이므로이 온 값 변화 이벤트는 지금 (이 JET의 이전 버전에서 optionChange 이벤트 옵션이었다) 다음과 같습니다

이벤트 처리 메서드에 전달되는 "on-value-change"특성에 주목하십시오. 이처럼