使用Ember.js和Ember-data＆Rails创建记录并处理记录列表

Question

我正在构建一个具有如下布局的应用程序。

我想创建一个新帖子，所以我按下了“新帖子按钮”，它把我带到了“帖子/新帖”。

My PostsNewRoute如下（我按照这里描述的方法）

 App.PostsNewRoute = Ember.Route.extend({
     model: function() {

           // create a separate transaction, 

           var transaction = this.get('store').transaction();

           // create a record using that transaction

           var post = transaction.createRecord(App.Post, {
                title: 'default placeholder title',
                body: 'default placeholder body'
           });

          return post;
     } 
 });

它会立即创建新记录，更新帖子列表，并显示新帖子的表单。

_{（来源： sunshineunderground.kr ）}

现在我有两个问题。

一个是帖子列表的顺序。

我预计新帖子将位于列表的顶部，但它位于列表的底部。

我使用rails作为我的后端，并将Post模型顺序设置为

 default_scope order('created_at DESC')

旧帖子位于现有帖子的下方。 但新创建的不是。 （尚未承诺后端）

另一个是当我点击列表中创建的帖子时

我可以在帖子列表中点击我新创建的帖子。 它带我到一个带URL的帖子页面

 /posts/null

这是我必须阻止的非常奇怪的行为。

我认为会有两种解决方案。

1. 当我点击“新发布按钮”创建一条记录并立即提交服务器，当服务器成功保存我的新记录后，刷新帖子列表并进入新创建的帖子的编辑模式。

2. 或者，当我点击PostsNewView中的“提交”按钮时，最初将Route的模型设置为null并创建记录。

3. 或者只显示属性为的帖子

     'isNew' = false, 'isDirty' = false, 

在列表中..

但遗憾的是，我不知道从哪里开始......

对于解决方案1，我完全迷路了。

对于解决方案2，我不知道如何将输入表单中的数据绑定到尚未存在的模型。

对于解决方案3，我完全迷路了。

请帮我！ 这将是余烬的预定方式？

（我听说Ember打算为每个开发人员使用相同的解决方案）

更新

现在我正在使用解决方案3并仍然有订购问题。 这是我的帖子模板代码。

    <div class="tools">
        {{#linkTo posts.new }}new post button{{/linkTo}}
    </div>
    <ul class="post-list">
        {{#each post in filteredContent}}
        <li>
            {{#linkTo post post }}
                <h3>{{ post.title }}</h3>
                <p class="date">2013/01/13</p>
                <div class="arrow"></div>
            {{/linkTo}}
        </li>
        {{/each}}
    </ul>
    {{outlet}}

更新

我通过过滤'arrangeContent'解决了这个问题，而不是'内容'

 App.PostsController = Ember.ArrayController.extend({
   sortProperties: ['id'],
   sortAscending: false,
   filteredContent: (function() {

     var content = this.get('arrangedContent');

     return content.filter(function(item, index) {
       return !(item.get('isDirty'));
     });
   }).property('content.@each')

 });

Answer 1

我们在应用程序的几个地方使用了解决方案3的变体。 恕我直言，它是3中最干净的，因为您不必担心服务器端的设置/拆卸这是我们实现它的方式：

App.PostsController = Ember.ArrayController.extend({
  sortProperties: ['id'],
  sortAscending: true,
  filteredContent: (function() {
    return this.get('content').filter(function(item, index) {
      return !(item.get('isDirty'));
    });
  }).property('content.@each')
});

然后在Posts模板中循环通过controller.filteredContent而不是controller.content。

对于解决方案1，有许多可能性。 您可以定义以下事件：

  createPost: function() {
    var post,
      _this = this;
    post = App.Post.createRecord({});
    post.one('didCreate', function() {
      return Ember.run.next(_this, function() {
        return this.transitionTo("posts.edit", post);
      });
    });
    return post.get("store").commit();
  }

它创建帖子然后设置一个承诺，一旦“didCreate”在帖子上触发就会执行。 此承诺仅在从服务器返回后才转换到帖子的路由，因此它将具有正确的ID。

Answer 2

确实，写得非常好。 谢谢你。

没有你的filteredContent必须使用isNew状态IO isDirty ，否则邮政正在编辑将不可见。 在任何一种情况下， filteredContent属性在我的情况下都不起作用。 我还注意到，因为我使用图像作为每个元素的一部分，所以当filteredContent改变时，所有图像都将被刷新。 这意味着我看到每个图像的请求。

我使用略有不同的方法。 我遍历内容并决定是否在模板中显示帖子 ：

# posts.handlebars
<ul class='posts'>
  {{#each controller}}
    {{#unless isNew}}
      <li>
        <h3>{{#linkTo post this}}{{title}}{{/linkTo}}</h3>
        <img {{bindAttr src="imageUrl"}}/>
        <a {{action deletePost}} class="delete-post tiny button">Delete</a>
      </li>
    {{/unless}}
  {{/each}}
</ul>

这只会在保存后显示Post对象。 H3-tag中的url还包含新创建的对象io posts / null的id。

我在你的问题中注意到的另一件事：你可以在模型本身上使用defaultValues属性，而不是将默认值传递给createRecord：

所以，而不是：

# App.PostsNewRoute
var post = transaction.createRecord(App.Post, {
            title: 'default placeholder title',
            body: 'default placeholder body'
       });

你可以这样做：

# App.Post
App.Post = DS.Model.extend({
  title: DS.attr('string', {
    defaultValue: "default placeholder title"
  }),
  body: DS.attr('string', {
    defaultValue: "default placeholder body"
  })
});

# App.PostsNewRoute
var post = transaction.createRecord(App.Post);

Answer 3

我实际上写了一个函数来反转内容数组：

http://andymatthews.net/read/2012/03/20/Reversing-the-output-of-an-Ember.js-content-array

这是一篇很旧的文章，差不多一年了，所以它可能不会按原样运作，但框架就在那里......

您可以在我写的这个迷你应用程序中看到它的运行情况：

http://andymatthews.net/code/emberTweets/

在顶部的输入字段中搜索用户，并按照从最新到最旧（而不是从最旧到最新）的顺序显示左侧。