0

Ember(ember-data) モデルにプロパティを配置しようとしています。これは、汎用テーブル コンポーネントに含めるプロパティの単なる配列です。最初に、これをモデルに追加しました：

tableColumns: function() {
  return ['age', 'gender', 'whatever'];
}.property()

しかし今では、これらのプロパティを簡単に反復処理し、各モデル インスタンスの値を呼び出すために、子コンポーネントのフープを飛び越えていることに気付きました。

モデルごとに列が変わるので、これは良い解決策だと思いました。より良い方法はありますか？

特に、行 (モデル インスタンス) ごとに、以下の架空のスニペットのような不合理なことを言いたい場合に行き詰まります。

{{#each col in tableColumns}}
  <td>{{model.col}}</td>
{{/each}}

私はコントローラーを使わずに、コンポーネントを一般的なものにしようとしています。

編集：

現在、行コンポーネントでこれを行ってから、hbs の「列」を反復処理しています。しかし、それは正しくないと感じており、いくつかの問題を引き起こすと思われる非同期部分（一部の列は外部呼び出しを行う必要があります）に到達しているので、より良い方法を見つけたいと思いました。

this.get('model').tableColumns().forEach(function(cell){
  cols.push(that.get('model._data.' + cell));
});
4

1 に答える 1

1

データ テーブル コンポーネントを作成しているようです。私は最近これを行いましたが、残念ながら私のコードをあなたと共有することはできません. 一般的な意味でそれがどのように機能するかを説明します。

まず、「列」オブジェクトの配列を定義しました。各列には、とりわけ「プロパティ」属性があります (ヘッダー値、CSS スタイルなど)。

私のデータテーブル コンポーネント タグは次のようになります。

{{data-table columns=columns content=content rowAction="open" empty-label="Nothing found."}}

この例では、columns属性は列定義contentの配列であり、表示するレコードの配列です。

コンポーネントの実装では、私のテンプレートには次のようなものがあります。

<tbody>
  {{#each row in content}}
  <tr>
    {{#each column in columns}}
    <td>
      <div>{{tablecell row column}}</div>
    </td>
    {{/each}}
  </tr>
  {{else}}
  <tr>
    <td colspan="7"> <em>{{emptyLabel}}</em>
    </td>
  </tr>
  {{/each}}
</tbody>

最後に、カスタム ハンドルバー コンポーネント ( tablecell)を使用します。

Ember.Handlebars.helper('tablecell', function(row, column, options) {
  if (!column.property) {
    Ember.warn('You must specify a "property" value for a table column:%@'.fmt(JSON.stringify(column)));
    return '';
  }
  // if it's a function, call passing the row object and return its value.
  if (typeof column.property === 'function') {
    return column.property(row);
  }
  // otherwise, it is a simple property name.  return it from the row object
  return row.get(column.property);
});

私のtablecellヘルパーpropertyが文字列または関数である属性を処理できることに気付くかもしれません。これにより、表示値のカスタム調整を行うことができます。

私はあなたに完全な解決策を提供しませんでしたが、うまくいけば、これがあなたを道に導くのに十分な情報です!

于 2015-05-19T19:49:57.227 に答える