0
votes

I'm new to ember.js (but I know MVC from my CakePHP experiences and JS as well) and in the last 2 weeks I build a little app at work which loads sideloaded JSON data with the REST-Adapter. I added some buttons with actions and everything works fine and I learned a lot, but it takes time to figure out the details.

All my controllers, routes and models are not organised at the moment in a folderstruture which is described in the ember.js-Guide: http://guides.emberjs.com/v1.12.0/concepts/naming-conventions/

Now I want to move the files to the folderstructure. But then the application does not work. It seems to my that the resolver can not finde the files at runtime. But why?

An easy example which does not work:

in "app.js" (loaded with -tag in "index.html"):

App = Ember.Application.create({
    LOG_RESOLVER: true // just for debugging
});

in "router.js" (loaded with -tag after "app.js" in "index.html"):

App.Router.map(function(){
  this.route('mytest');
});

in "routes/mytest.js":

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.set('title', "Hello world!");
  }
});

in "controllers/mytest.js":

export default Ember.Controller.extend({
    appName: 'mytest'
});

in "indes.html":

<script type="text/x-handlebars">
    {{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
  mytest Template
  <h1>appName: {{appName}}</h1>
  <h2>title: {{title}}</h2>
</script>

The Handlebar-template "mytest" is showen, but {{appName}} and {{title}} are empty. If I moved the "mytest"-Template to "templates/mytest.hbs" nothing is showen.

Seems to my that the resolver does not work. Or something wrong with the naming-conventions Guide?

My another assumption: Resolver-Stuff only works when using a buildprocess like in ember-cli.

Using "ember-1.12.1.debug", "ember-template-compiler-1.12.1"

Thanks for help.

-update- Here the "index.html" - simple example:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
    </head>
<body>
    <script type="text/x-handlebars">
    {{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
    {{outlet}}
    </script>

    <script type="text/x-handlebars" id="mytest">
        mytest Template
        <h1>appName: {{appName}}</h1>
        <h2>title: {{title}}</h2>
    </script>

    <script src="libs/jquery-2.1.4.js"></script>
    <script src="libs/ember-template-compiler-1.12.1.js"></script>
    <script src="libs/ember-1.12.1.debug.js"></script>
    <script src="app.js" ></script>
    <script src="router.js" ></script>
    </body>
</html>
1
If you are looking for a clean project structure you should give ember-cli a lookPatsy Issa
Can you please provide your full index.html? It looks like your expecting things to work in a file structure like that used in ember-cli, but without ember-cli? That doesn't really work..jmurphyau
I looked at ember-cli last week but there are much more magic during using it. E.g.: The {{outlet}} moved and it is not clear to me how the magic with {{content-for ... }} works. And there was a <meta> tag with a long configurationstring as value.Ste.

1 Answers

0
votes

At the moment I guess that the ember.js guide about naming conventions (guides.emberjs.com/v1.12.0/concepts/naming-conventions) left out, that "Ember.js uses a runtime resolver to wire up your objects without a lot of boilerplate" only works with "ember-cli" or the older "ember app kit" or another tool, but not when the application is running. So no JS-Files will be loaded from the server from while running the JS-application.