mercredi 18 novembre 2015

How to setup the “Loading Data from a Server” example on the EmberJS homepage within an Ember CLI structure?

I’m attempting to teach myself EmberJS basics using EmberCLI and such. Ran into one folder structure hitch which Henry Vonfire helped me understand and clear up.

Now that I have my “sea legs” a bit more stable, I am attempting to implement the “Loading Data from a Server” example from the official EmberJS homepage. I can get the app to run, but apparently no data is returned or rendered to the frontend despite the inspector clearly showing data is being properly fetched in my browser. Why is my “handlebars” template not parsing the data?

My simple/humble controller structure is as follows:

  • app/routes/pull-requests.js
  • app/templates/pull-requests.hbs

And the content of each is as follows:

Contents of app/routes/pull-requests.js:

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.set('title', "Pull Requests");
  },
  activate: function() {
    document.title = "Pull Requests";
  },
  model: function() {
    return Ember.$.getJSON('http://ift.tt/1b39EeD').then(function(data) {
      return data.splice(0, 3);
    });
  }
});

Contents of app/templates/pull-requests.hbs:

<h1>{{title}}</h1>

<p>This is where we would be parsing raw pull request data.</p>

<h3>Last 3 Pull Requests to Ember.js</h3>
<ul>
{{#each model as |pr|}}
  <li>
    <div class="issue-number">#{{pr.number}}</div>
    <div class="issue-title">
      <a href={{pr.html_url}}>{{pr.title}}</a>
    </div>
    <div class="author-name">
      Opened by <a href={{pr.head.user.html_url}}><strong>@{{pr.head.user.login}}</strong></a>
    </div>
  </li>
{{/each}}
</ul>

{{outlet}}

Initially I had some CORS issues that were cleared up by setting the following contentSecurityPolicy block in config/environment.js:

contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self'",
  'font-src': "'self'",
  'connect-src': "'self' https://api.github.com/",
  'img-src': "'self'",
  'style-src': "'self'",
  'media-src': "'self'"
},

Now the page simply loads without an error, but without iterating through the data. What’s up? Is this something that should be rejiggered into a code block in models/pull-requests.js? Or is there some syntax error with app/templates/pull-requests.hbs that is causing it to fail in some way? Or is it something else?

Aucun commentaire:

Enregistrer un commentaire