无法让它工作'ember-data'

时间:2014-03-21 12:07:35

标签: ember.js ember-data handlebars.js

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"
}];

和把手(我下次尝试使用hbs

        <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>

我得到的错误

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

在阅读了关于ember.js官方网站和其他社区网站的介绍之后,我尝试按照this链接跟随ember指南,但是,我无法使其正常工作。

2 个答案:

答案 0 :(得分:1)

您的错误解释了它无法正常工作的原因。 GET请求失败,因为http://localhost/posts不存在。您应该阅读有关Ember's adapters及其惯例的更多信息。

答案 1 :(得分:1)

您应该分配DS.FixtureAdapter本身而不是字符串。您也可以删除revision属性,因为这不再是必需的。

变化:

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

要:

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