Force method to execute again

1

All, I’m struggling with the ember js workflow. Specifically I’m working with a proprietary JavaScript API that asyncronously renders content into a container of my choosing. When using this API in a template it only renders the first time. Where other, more simple, JavaScript seems to execute each time the template is shown.

Take the following for example

HelloRandom.hbs 

<script>
  function getRandom(min, max) {
      return Math.random() * (max - min) + min;
  }

  $('#someContent).html('Hello ' + getRandom(1, 100));
</script>

The above works as intended, I navigate to http://localhost:4200/HelloRandom and a random number is generated. I then navigate to anywhere else in the application and back to HelloRandom and a new random number is generated.

If I plugin my code to the same template then it is only executed once and never again. I will post what I can here

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <script type='text/javascript' language='JavaScript' src='http://localhost/myapi'></script>

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

HelloAPI.hbs 

<script>
  myAPI.load('module');
  var ops = new myAPI.setOptions();
  ops.setType('open');
  ops.setDB('myDB');
  myAPI.init('url', ops == undefined ? null : ops, null, null, function() {
    "use strict";

    var myContent = new myAPI.RenderContent('someContent');
    myAPI.submit();
  });
</script>

I’m thinking that this might have something to do with the fact that myAPI.load(‘module’) is in the template and causing issues. So I removed it and added it to in index.html but my API then complains that ‘module’ is not loaded.

I wish I could give more detail on my code, any help is appreciated.

2

It was an issue with my API. I moved everything to the route and extended actions.didTransition() like the following

HelloAPI.js import Ember from ‘ember’;

  myAPI.load('module');
  var ops = new myAPI.setOptions();
  var myContent;
  ops.setType('open');
  ops.setDB('myDB');
  myAPI.init('url', ops == undefined ? null : ops, null, null, function() {
    "use strict";

    myContent = new myAPI.RenderContent('someContent');
    myAPI.submit();
  });

export default Ember.Route.extend({
  actions: {
    didTransition() {
      Ember.run.next(this, 'initTooltip');
    }
  },
  initTooltip() {
    "use strict";
    if(myContent === undefined) {
      console.log('undefined');
    }else {
      myContent = new myAPI.RenderContent('someContent');
      var options = new myapi.options();
      myContent.setUIOptions(options);
      myContent.submit(function(){console.log('done');});
    }
  }
});
1 Like