Emberjs - 实时更改不起作用?

时间:2013-08-11 00:38:44

标签: javascript ember.js

我遵循了Emberjs的创作者之一的教程:http://www.youtube.com/watch?v=Ga99hMi7wfY 本教程的目标是在一个示例中提供emberjs的基础知识,其中有一个帖子列表,如果您编辑一个帖子,则内容将映射到相应的textarea或textfield。然后,这些变化是实时可见的。

然而,这不起作用。而且我一直在关注官方教程(显然,自从这个视频以来,emberjs已经发生了很大变化)。

无论如何,我错过了什么?

这是我的代码(HTML):

  <script type="text/x-handlebars">
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
            <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li>
            <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
        </ul>
    </div>

    {{outlet}}
</div>  
</script>

<script type="text/x-handlebars" id="about">
<div class="about">
    random text about
</div>  
</script>

<script type="text/x-handlebars" id="posts">

{{#if isEditing}}
    {{partial 'post/edit'}}
    <button {{action 'save'}}>Done</button>
{{else}}
    <button {{action 'edit'}}>Edit</button>
{{/if}}
<div class="about">
    <table>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Author</th>
            <th>Date</th>
            <th>Utilities</th>
        </tr>
        {{#each model}}
            <tr>
                <td>{{id}}</td>
                <td>{{title}}</td>
                <td>{{author}}</td>
                <td>{{publishedAt}}</td>
                <td>{{#linkTo "post" this}}Details{{/linkTo}}</td>                  
            </tr>
        {{/each}}
    </table>
</div>  
<div>
    {{outlet}}
</div>
</script>

<script type="text/x-handlebars" id="post/_edit">
<p>{{view Ember.TextArea valueBinding="title" placeholder="test.."}}</p>
<p>{{view Ember.TextField valueBinding="author"}}</p>
</script>

<script type="text/x-handlebars" id="post">
  <h1>{{title}}</h1>
  <h2>by {{author}}</h2>
  <small>{{date publishedAt}}</small>
</script>

这是emberjs部分:

    App = Ember.Application.create();

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

    App.Router.map(function(){
        this.resource("posts", function(){
            this.resource("post", { path: ':post_id'});
        });
        this.resource("about");
    });

    App.PostsRoute = Ember.Route.extend({
        model: function(){
            return App.Post.find();
        }
    });

    App.PostsController = Ember.ObjectController.extend({
        isEditing: false,
        edit: function(){
            this.set("isEditing", true);
        },
        save: function() {
            this.set("isEditing", false);
        }
    });

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

    App.Post.FIXTURES = [
        {
            id:1,
            title: "This is my title",
            author: "John Doe",
            publishedAt: new Date('12-27-2012')
        },
        {
            id:2,
            title: "This is another title",
            author: "Jane Doe",
            publishedAt: new Date('02-03-2013')
        }
    ];

    Ember.Handlebars.registerBoundHelper('date', function(date){
        return date.getFullYear();
    });

2 个答案:

答案 0 :(得分:2)

控制器名称应为PostController而不是PostsController。他们负责处理不同的路线。

答案 1 :(得分:1)

@wedens是对的,你有一个错误命名的单个帖子的控制器,你还应该看看this github repo,其中包含(正确)源代码,该源代码适用于视频。