使用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/

在頂部的輸入字段中搜索用戶，並按照從最新到最舊（而不是從最舊到最新）的順序顯示左側。