CODEWITHSUNDEEP
ember.jsember-datahandlebars.js
agriboz
agriboz

Reputation: 4854

Can't get it work 'ember-data'

App = Ember.Application.create();


App.Store = DS.Store.extend({
    revision: 12, 
    adapter: 'DS.FixtureAdapter'
});

App.Router.map(function() {
    this.resource('about')
    this.resource('posts') 
});


App.PostsRoute = Ember.Route.extend({

    model: function() {
        return this.store.find('post'); 
       // i tried return App.Post.find(); didn't work.
    }
});


App.Post = DS.Model.extend({ 
    title: DS.attr('string'),
    author: DS.attr('string'),
    intro: DS.attr('string'),
    extended: DS.attr('string'),
    publishedAt: DS.attr('date')
});



App.Post.FIXTURES = [{ 
    id: 1,
    title: "Title 1",
    author: "Anonim",
    publishedAt: new Date('21-04-2014'),
    intro: "Introduction",
    extended: "It is a long story"
}, {
    id: 2,
    title: "Title 2",
    author: "Anonymous 2",
    publishedAt: new Date('12-04-2014'),
    intro: "Introduction for ID 2",
    extended: "It is a long story for ID 2"
}];

And handlebars (I wll try to use hbs next time)

        <script type="text/x-handlebars">
          <nav class="top-bar" data-topbar>
            <ul class="title-area">
              <li class="name">
                <h1><a href="#">Starter Kit</a></h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>

            <section class="top-bar-section">
              <ul class="left">
                <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
                <li>{{#link-to 'about'}}About{{/link-to}}</li>
              </ul>
            </section>
          </nav>
         {{outlet}} <!--it is a placeholder to show templates-->
        </script>

        <script type="text/x-handlebars" id="posts">
          <div class="row">
            <div class="large-12 columns">

                <h3>Posts Page</h3>
                <h4>Dynamic Posts Page</h4>
                {{#each model}}
                  <ul>
                    <li>
                      <p>{{title}}</p>
                      <p>{{author}}</p>
                      <p>{{intro}}</p>
                      <p>{{extended}}</p>
                      <p>{{date}}</p>
                    </li>
                  </ul> 
                {{/each}}
            </div>
          </div>
          {{outlet}}
        </script>


        <script type="text/x-handlebars" id="about">
        <div class="row">
          <div class="large-12 columns">
              <h3>About page</h3>
              <p>About</p>
          </div>
        </div>
        {{outlet}}
        </script>

The error i get 

GET http://localhost/posts 404 (Not Found) jquery.js:26
Error while loading route: undefined

After reading introductions both on ember.js offical site and other community sites, I tried to follow the ember guide following by this link, however, i couldn't make it work.

Upvotes: 1

Views: 267

Answers (2)

James
James

Reputation: 4737

You should assign DS.FixtureAdapter itself rather than a string. You can also remove the revision property since that's not really necessary anymore.

Change:

App.Store = DS.Store.extend({
    revision: 12, 
    adapter: 'DS.FixtureAdapter'
});

To:

App.Store = DS.Store.extend({  
    adapter: DS.FixtureAdapter
});

Upvotes: 1

GJK
GJK

Reputation: 37369

Your error explains exactly why it's not working. The GET request failed because http://localhost/posts doesn't exist. You should read more about Ember's adapters and their conventions.

Upvotes: 1

Related Questions