CODEWITHSUNDEEP
ember.js
spencerrecneps
spencerrecneps

Reputation: 439

Ember JS app shows blank page

I'm creating a simple Ember JS app based loosely on the Beginner's Guide on the website. However, I can't seem to get anything to render on the page. When I check the Ember Inspector my routes are all present and I don't see any errors so it's not immediately clear where the problem is.

Here is the html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Coin</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <script type="text/x-handlebars">
    <div>Hello</div>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" id="accounts">
    <div>accounts</div>
    <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
            {{#each}}
            <li>account link {{#link-to 'account' this}}{{name}}{{/link-to}}</li>
            {{/each}}
        </ul>
    </div>

    <div class="col-md-10">
        {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" id="account">
    <ul>
      {{#each}}
      <li>{{comment}}</li>
      {{/each}}
    </ul>
  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.4.0.js"></script>
  <script src="js/app.js"></script>
  <script src="dist/js/bs-core.min.js"></script>
  <script src="dist/js/bs-nav.min.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>
</html>

And here is my app.js file:

App = Ember.Application.create();

App.Router.map(function() {
    this.resource('accounts');
    this.resource('transactions', { path: ':accounts_id' });
})

App.AccountsRoute = Ember.Route.extend({
    model: function() {
        return accounts;
    }
})

App.TransactionsRoute = Ember.Route.extend({
    model: function() {
        return transactions;
    }
})





var accounts = [{
    id: 1,
    name: 'Account 1',
}, {
    id: 2,
    name: 'Account 2'
}];

var transactions = [{
    id: 1,
    id_account: 1,
    amount: 12,
    comment: 'blah'
}, {
    id: 2,
    id_account: 1,
    amount: 5,
    comment: 'blah2'
}, {
    id: 3,
    id_account: 2,
    amount: 98,
    comment: 'blah4'
}];

The one thing that renders properly on the page is the "Hello" in the application template. Nothing shows in the {{outlet}} when I navigate to #/accounts or any of the other defined routes. And in fact, when I add #/accounts in the url even my "Hello" disappears.

Is there something obvious that I'm overlooking? I'm new to Ember so I'm sure it's something silly but I can't figure out where the problem is from the documentation.

edit: I'm using Ember v1.4.0 linked directly from the website and I have checked "Allow access to file urls" in Ember Inspector.

Upvotes: 3

Views: 2151

Answers (1)

tavi
tavi

Reputation: 594

I made a working version of what you started in this ember jsbin

What I noticed you were doing wrong was by trying to link to a non-existing route with this {{#link-to 'account' this}}. You didn't define the account route that I notice you want to receive a parameter. However I think you want to send the id of the current item in the iteration. So you can simply do that by changing this into {{#link-to 'account' id}}.

So 2 important modifications to get to something working was to add the route and to fix the param of the link-to helper. Then I just assumed that you want to show transactions as well and fixed that as well.

Hope this helps.

Upvotes: 2

Related Questions