1

EMber JS でデータテーブル jquery プラグインを試しています。Ember が新しいデータで DOM を更新しようとした瞬間のように見えます。datatable がスタイル設定され、検索バー、Twitter ブートストラップ ページネーション フッターなどの要素が挿入された後に問題が発生します。コードは次のとおりです。

App.TableView = Em.View.extend({
    classNames:['table','table-striped','table-bordered','dataTable'],
    tagName:'table',
    didInsertElement:function (){
       this.$().dataTable({

           "sPaginationType": "bootstrap",
           "oLanguage": {
               "sLengthMenu": "_MENU_ records per page"
           }
       });
    }
});

ハンドルバーでの使用法は次のとおりです。

{{#view App.TableView }}
        {{view App.ListStaffView}}
 {{/view}}

App.ListStaffView には次のものが含まれています

App.ListStaffView = Ember.View.extend({
  templateName:    'list',
  staffBinding: 'App.staffController',

  showNew: function() {
    this.set('isNewVisible', true);
  },

  hideNew: function() {
    this.set('isNewVisible', false);
  },

  refreshListing: function() {
    App.staffController.findAll();
  }
});

リストテンプレートは次のとおりです

<thead>
                        <tr>
                        <th>Name</th>
                        <th>Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{#each staff}}
                        {{view App.ShowStaffView staffBinding="this"}}
                        {{/each}}
                        </tbody>

                        <tfoot>
                        <div class="commands">

                        <a class="btn btn-inverse" href="#"{{action "showNew"}}>
                            <i class="icon-plus"></i>
                        </a>
                        <a class="btn btn-inverse" href="#"{{action "refreshListing"}}>
                            <i class="icon-refresh"></i>
                        </a>

                        </div>
                        </tfoot>

これをロードした後のエラーは次のようになります

エラー: Metamorph で操作を実行できません

ゼロ構成でデータテーブル統合を行いましたが、失敗しました。Ember はデータを DOM に挿入できないため、JQuery データテーブルは「データがありません」と言い続けます。

4

3 に答える 3

1

同じ問題が発生し、テーブルを保持するビューでrerender（）を呼び出すことで問題を回避できました。

たとえば、私のビューでは、テーブルテキストを入力ボックスに変更するeditRow（）というメソッドがあります。これが私がそれをした方法です：

    editRow：function（event）
    {{
        var obj = event.context;
        obj.setIsEditing（true）;
        this.rerender（）;
    }
于 2013-02-15T14:04:52.000 に答える
1

データテーブルは、予想される DOM 構造で正常に動作します。Ember の場合も同様です。両方を使用している場合、一方が他方の期待される DOM 構造を変更します。これが問題の原因です。

Ember を使用する場合は、TableView 用の flame.js などの Ember ウィジェット ライブラリを使用してください。

于 2012-06-27T04:56:45.307 に答える
0

#eachDataTablesテーブルによって「オーバーライド」されるテーブル内でヘルパーを使用することはできません。

于 2012-07-02T09:02:52.457 に答える