Ember DS.hasMany children not showing up with JSON API

I am trying to use the JSON API Adapter with ember-cli 2.5.1 , but I'm having a bit of trouble.

I have a todo-list.js model, which has a "hasMany" relationship to todo-list-item.js. Getting the todo-list, the server returns this:

    {
      "links": {
        "self": "http://localhost:4200/service/v1/todolists/b-tlst-af69786c-cbaf-4df9-a4a3-d8232677006a"
      },
      "data": {
        "type": "todo-list",
        "id": "b-tlst-af69786c-cbaf-4df9-a4a3-d8232677006a",
        "attributes": {
          "name": "b1-TodoList",
          "created-on": 1468474962458,
          "modified-on": 1468474962458
        },
        "relationships": {
          "todolistitems": {
            "data": {
              "type": "todo-list-item",
              "id": "b-todo-b5e3c146-d93a-4f97-8540-875bbcd156ca"
            }
          }
        }
      }
    }

If there had been two TodoListItem children instead of one, the value of that "data" key would have been an array, rather than an object.

After receiving this, I was expecting the Ember Chrome plug-in's "Data" tab to show 1 TodoList and 1 child TodoListItem. Instead, it shows 1 TodoList and 0 TodoListItems.

I note from the Network tab that the browser never makes a request to get the items listed in the "data" section of the response.

Is the relationships section above correct and sufficient?

Invalid Version: Ember-Cli-Babel

Tried upgrading my ember project from ember 2.12.2 to 2.13.2 but I get the following error when I run ember init

    Invalid Version: http://ift.tt/2rTdQ9c

    TypeError: Invalid Version: http://ift.tt/2rTdQ9c

at new SemVer (/Users/code/website/node_modules/semver/semver.js:293:11)
    at Range.test (/Users/code/website/node_modules/semver/semver.js:1036:15)
    at Function.satisfies (/Users/code/website/node_modules/semver/semver.js:1085:16)
    at Class.Addon.(anonymous function) (/Users/code/website/node_modules/ember-cli/lib/models/addon.js:1547:25)
    at Class.init (/Users/code/website/node_modules/ember-cli/lib/models/addon.js:234:57)
    at Class.superWrapper [as init] (/Users/code/website/node_modules/core-object/lib/assign-properties.js:34:20)
    at Class.CoreObject (/Users/code/website/node_modules/core-object/core-object.js:9:15)
    at Class (/Users/code/website/node_modules/core-object/core-object.js:21:5)
    at Class (/Users/code/website/node_modules/core-object/core-object.js:21:5)
    at graph.topsort.vertex (/Users/code/website/node_modules/ember-cli/lib/models/addons-factory.js:55:21)

Yet when I run npm install ember-cli-babel I still get the error but I also get that the current version is ember-cli-babel@5.2.4

What can I do to fix this?

Parsing Ember Model file during Blueprint usage

I'm writing an Ember custom blueprint that outputs different component fields based off the Ember Data Model passed to the ember g <blueprint> <modelname> command.

However, trying to parse the model file as Javascript is hard. The reason being that we’re operating in a CommonJS Node environment trying to import an ES6 module. Even if we use an ES6 parsing library imported from npm, then we can’t resolve the Model's import path lookups from this context.

The next approach was to try and import the generated Javascript file in the dist folder (e.g. dist/my-first-blueprint.js). This is an AMD structure for modules, and none of the readily available AMD npm modules appear to allow easy consumption of this file either.

Presumably there is code added to dist/vendor.js that allows the Ember Resolver to find the correctly referenced module. However, this is where my knowledge of the Broccoli build chain and Ember internals fails me.

The final option is to parse the Javascript file as text using pattern matching. With the combinations of mixins, different root classes and other variances, this is definitely non-trivial and is something that has been deferred to a separate Blueprint.

Does anyone know of any ideas or hints on how, within the Blueprint's index.js file I can import an Ember Data model and determine it's attributes?

Ember server not working.

I have below on Windows 10: o Ember-cli: 2.4.3 o Node: 6.11.0 o Npm – 5.0.3

I am executing command ember server from admin command prompt and get below error: Livereload failed on http://localhost:49152. It is either in use or you do not have permission.

Then I tried ember serve --port 8080 --live-reload-port 35735 and it is hanging up. Please tell me how to correct this.

Chrome extension with EmberJS

I am developing a Chrome extension using Ember CLI, but are having difficulty getting the routes/resources to play nicely with Chrome as the Index route is not being fired correctly.

How to configure Ember routes in a Chrome extension? I found this question and followed suggested steps. It works fine, but my question is that with a regular EmberJS, an application.hbs file is where a project start at first. I don't think chrome extension allows to start off with .hbs file. I am thinking that I make a javascript file running as a background and make .hbs running. However, I am very new, so I don't know how what to write on a js file to make .hbs to run.

Could someone help me on this please? I have been trying to figure this out for a week, but I am not getting there....

EmberJS converting to requireJS

I can find that the components and routes created in my ember-cli app has got converted to js files which uses requireJS inside /dist folder . I am unable track the flow of ember converting to html and js and loading files through requireJS. I need to know this to create an app not in ember-cli but to behave like it while loading components and routing in my homepage.

It will be more helpful if you provide some information and suggestion on this.

Thanks in advance.

Preloading video content in EmberJS

I'm building an EmberJS app that is effectively a slideshow and the slides are either images or videos.

I've found that, as each slide is loaded, there is a short delay whilst the image or video was loaded from the server.

In order to stop this delay, I've added a function to my application controller that extracts a list of the image urls from my models and then calls images.forEach(i => { (new Image()).src = i }); on them. This has resulted in the slide rendering almost instantly, as the images are now loaded from the cache.

I was wondering whether there is something similar that I can do with the list of video URLs? The only info I've been able to find about preloading involves adding a preload attribute to the video tag but this won't work as the page HTML doesn't get rendered until the slide loads...