Forum Stats

  • 3,826,668 Users
  • 2,260,687 Discussions
  • 7,897,044 Comments

Discussions

how to pass variables between modules

user1950921
user1950921 Member Posts: 29
edited Feb 12, 2016 11:21AM in Oracle JET

I want to know how to initialise variables that are being used in other modules.

In this Hands-On-Lab (Oracle JET - Hands-On-Lab ) you must initialise the variable val with this statement: self.val = ko.observableArray(['bar']);

After this I used this example Oracle JET - Router - ojModule with nested routers from the cookbook to build a single page application.

In this single page application I build the HOL example and a chart. My issue is now that I can't initialise the variable for the select.

In main.js this is the document.ready function with the applyBindings:

$(document).ready(function() {

      oj.Router.sync().then(function() {

         ko.applyBindings(viewModel, document.getElementById('routing-container'));

      });

   });  

In the chart.tmpl.tmpl this is the part of the select:

        <select id="basicSelect"

                    data-bind="ojComponent: {component:'ojSelect',                                                   

                    value: val,                                                   

                    rootAttributes: {style:'max-width:20em'}}">

                <option value="line">Line</option>

                <option value="bar">Bar</option>

                <option value="area">Area</option>

                <option value="combo">Combination</option>

                <option value="lineWithArea">Line with Area</option>

            </select>

In the chart.js I use the following code to process the data:

   var viewModel = {

        router: undefined,

        initialize : function(data) {

            if (this.router) {

                return;

            }

        router = oj.Router.rootInstance;

        oj.Router.sync();  

        },

        selectHandler: function(event, ui) {

         if ('chart-container' === event.target.id && event.originalEvent) {

            viewModel.router.go(ui.key);

         }

         }

   };

How can I set the initial value of the ojselect from the main.js?

monacotoni

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,793 Employee
    edited Feb 10, 2016 7:30PM

    Hi, there are a few ways to handle this:

    1) Use the $root viewModel as a location to set the values that you feel will be "global" in nature.

    If you have curtain values that you believe you will use across all of your child viewModels, you can define those in the viewModel that your initial application is defined against.  In the case of the QuickStart template, this would be in the main.js file.

    You reference those observables or variables by using the $root.<my value> syntax.  You can also use the $parent context to just pull values from one viewModel up in the nesting.

    Knockoutjs.com provides some good docs on using the binding context.

    Knockout : Binding context

    2) If you need to get at a value that is being used in a different viewModel via JavaScript (not in the HTML), you can take a look at the Knockout dataFor and contextFor methods.

    These work really when by getting the data that is currently associated with a specific DOM element.  You can read about it here:

    Knockout : Using unobtrusive event handlers

    Hope this helps you get moving again...

    monacotoniuser1950921
  • user1950921
    user1950921 Member Posts: 29
    edited Feb 11, 2016 7:28AM

    Hi John,

    Thanks for your answer.

    The problem was that I must initialize the variable for value of the ojSelect.

    I solved the issue by doing the following:

    var viewModel = {

            router: undefined,

            initialize : function(data) {

                if (this.router) {

                    return;

                }

            router = oj.Router.rootInstance;

            this.val = ko.observableArray(["bar"]);

            oj.Router.sync();   

            },

            selectHandler: function(event, ui) {

             if ('chart-container' === event.target.id && event.originalEvent) {

                viewModel.router.go(ui.key);

             }

             }

       }; 

    Kind regards

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,793 Employee
    edited Feb 12, 2016 11:21AM

    Geertjan just wrote up a really nice two part blog post on this topic.  I highly recommend reading over that for this topic.

    https://blogs.oracle.com/geertjan/entry/intermodular_communication_in_oracle_jet

    Happy Coding!