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

Question

I wonder how can I achieve such a goal: when I change the choice from the select combox, the data distribution in the pie gragh will change correspondingly.

The HTML code snippet:

<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>

The JS code snippet:

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

To be simplified, the problem should be: how to obtain oj-option value from HTML and use it as a condition in JS to change the variable barSeries ?

Ray · Accepted Answer · 2017-10-10 17:18:19Z

4

Like this:

Get the value of the oj-select-one in an observable, say 'currentFlow'.

Provide an on-value-changed attribute. Its value will be the name of a function that you will use to update the chart when the value changes, say '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>

Inside the 'updateChart' function, get the current value of currentFlow observable, and change the value of your observableArray barSeriesValue accordingly.

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]});
    }
}

answered Oct 10, 2017 at 17:18

Ray

3,9927 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elva Over a year ago

Thanks very much, the explanation is clear and easy to understand.

Elva Over a year ago

Can we use data binding in HTML rather than add the on-value-changed attribute? How to reflect value="{{currentFlow}}" in JS directly?

Ray Over a year ago

@Elva yep, we could, by using the 'subscribe' function on currentFlow.

peppertech · Accepted Answer · 2017-10-10 16:16:49Z

This one should be pretty straight forward. In the on-value-change event handler, get the value of the select component and use it to reset the value of the barSeries array.

The barSeries array is used as the basis for the observable that feeds the chart. Once you change the array, the chart will auto-update to reflect the new data.

Since it appears you are using the new JET 4.0.0 custom element syntax, the on-value-change event now looks like this (this was the optionChange event option in previous versions of JET):

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

Notice the "on-value-change" attribute that is passed an event handler method.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related