3 Replies Latest reply on Feb 12, 2016 4:21 PM by John 'JB' Brock-Oracle

    how to pass variables between modules

    user1950921

      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?

        • 1. Re: how to pass variables between modules
          John 'JB' Brock-Oracle

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

          1 person found this helpful
          • 2. Re: how to pass variables between modules
            user1950921

            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

            • 3. Re: how to pass variables between modules
              John 'JB' Brock-Oracle

              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!