Ember.js在使用sortProperties時從表中刪除x值可編輯

Question

我有一個表格，其中包含使用控制器中的內置sortProperties中的ember進行排序的數據。我也有一個過濾機制，其中我用下面的代碼過濾數據：

filteredContent: function() { 
    var filter = this.get('filter'), 
     regex = new RegExp(filter, 'gi'), 
     data = this.get('arrangedContent'); 

    return data.filter(function(item) { 
     return item.get('name').match(regex) || item.get('email').match(regex) || (item.get('role') && item.get('role').match(regex)); 
    }); 
    }.property('sortProperties', 'sortAscending', 'filter', '@each.isNew'), 

我使用一個稱爲X-編輯（http://vitalets.github.io/x-editable/）插件，使在表中通過簡單地點擊它可編輯的每個值。不幸的是，這在使用過濾和支持的sortProperties時不起作用。如果禁用這些功能，X-編輯的作品，但過濾和sortProperties看似消除了產生的X-編輯HTML /邏輯，並用新的HTML替代它：

它從這個：

<a class="user-email editable editable-click" data-type="text" data-id="email" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user email">dummy_email_214@gmail.com</a> 

爲此：

<a class="user-email" data-type="text" data-id="email" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user email"><script id="metamorph-789-start" type="text/x-placeholder"></script>dummy_email_214@gmail.com<script id="metamorph-789-end" type="text/x-placeholder"></script></a> 

現在，我得到燼需要更換a的內容，以創造的價值具有約束力，但它似乎取代整個a並重新創建它，但它沒有安裝X編輯HTML和邏輯。

有沒有人有解決這個問題？

感謝

西奧

編輯：下面是我的表的完整代碼：

<table id="users-table" class="table table-bordered table-striped searchable-table" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th id="name" width="20%" {{action "sortBy" "name"}}>Name</th> 
     <th id="email" width="25%" {{action "sortBy" "email"}}>Email</th> 
     <th id="password" width="30%" {{action "sortBy" "password"}}>Password</th> 
     <th id="role" width="10%" {{action "sortBy" "role"}}>Role</th> 
     <th id="active" width="10%" {{action "sortBy" "active"}}>Active</th> 
     <th class="non-sortable" width="5%"></th> 
    </tr> 
    </thead> 

    <tbody> 
    {{#each user in filteredContent}} 
     <tr> 
     <td> 
      <a class="user-name" data-type="text" data-id="name" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user name">{{user.name}}</a> 
     </td> 

     <td> 
      <a class="user-email" data-type="text" data-id="email" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user email">{{user.email}}</a> 
     </td> 

     <td> 
      <a class="user-password" data-type="text" data-id="password" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user password">{{user.password}}</a> 
     </td> 

     <td><a class="user-role" data-type="select" data-id="role" data-pk="1" data-title="Select user role">{{user.role}}</a></td> 
     <td><a class="user-active" data-type="select" data-id="active" data-pk="1" data-title="Select whether the user is currently active">{{user.active}}</a></td> 

     <td style="text-align: center"> 
      <a {{action 'deleteUser' user }} alt="Delete user" style="cursor: pointer"> 
      <span class="glyphicon glyphicon-remove"></span> 
      </a> 
     </td> 
     </tr> 
    {{/each}} 
    </tbody> 
</table> 

afterRenderEvent：

afterRenderEvent: function() { 
    // set default sorting 
    this.get('controller').send("sortBy", "name", false); 

    // registers the editors, their validators and their respective options 

    this.registerEditors(); 
    }, 

Answer 1

您還沒有表現出你在哪裏打電話.editable() 。發生的事情是，在將視圖插入到DOM之前，要初始化編輯器的JavaScript正在運行。

在將視圖插入DOM後，您需要在view中使用didInsertElement來調用.editable()。

didInsertElement: function(){ 
    this.$('#users-table').editable(); 
}