3

我遵循了 Emberjs 的创建者之一的教程：http ://www.youtube.com/watch?v=Ga99hMi7wfY 教程的目标是通过示例介绍 emberjs 的基础知识，其中包含帖子列表和如果您编辑一个，内容将映射到相应的文本区域或文本字段。然后，这些变化是实时可见的。

然而，这不起作用。而且我一直在关注官方教程（显然，自从这个 yt 视频以来，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();
    });
4

2 回答 2

2

Name of controller should be PostController instead of PostsController. They are responsible for handling different routes.

于 2013-08-11T06:16:10.753 回答
1

@wedens 是对的，您对单个帖子有一个错误命名的控制器，您还应该查看此 github 存储库，其中包含视频中该示例应用程序构建的（正确）源代码。

于 2013-08-11T08:28:18.910 回答