0

サーバー モデルの percentFree 属性に応じて、a のクラス<tr>をどちらか#warningに設定しようとしています。#successこれは私のハンドルバーのテンプレートです:

<script type="text/x-handlebars" data-template-name="dashboard">

<h1>Virtual Image Overview</h1>

<table class="table table-hover">
    <thead>
        <tr>
            <th>Machine Name</th>
            <th>Drive</th>
            <th>Total Size</th>
            <th>Used Space</th>
            <th>% free</th>
        </tr>
    </thead>
    <tbody>
      {{#each controller}}
        <tr {{bindAttr class="status"}}>
          <td>{{name}}</td>
          <td>{{drive}}</td>
          <td>{{totalSize}}</td>
          <td>{{usedSpace}}</td>
          <td>{{percentFree}}</td>
        </tr>
      {{/each}}
    </tbody>
</table>
</script>

そして、これは私のモデルです：

Dashboard.Server = DS.Model.extend({
  name: DS.attr('string'),
  drive: DS.attr('string'),
  totalSize: DS.attr('number'),
  usedSpace: DS.attr('number'),
  percentFree: DS.attr('number'),
  status: "",
  setStatus: function() {
    if(this.percentFree <= 0.50) {
      this.status = "warning";
    } else {
      this.status = "success";
    }
  }
});

のクラスが<tr>実際に更新されることはありませんが。これを行うためのより効率的な（正しい）方法はありますか？

私も試しstatus: this.setStatus()てみました

setStatus: function() {
  if(this.percentFree <= 0.50) {
    return "warning";
  } else {
    return "success";
  } 
}

運が悪いと

4

2 に答える 2

1

これは、itemControllerビュー内の子ビューごとにを使用するのに適した場所{{each}}です。

値を持つプロパティ{{each}}を含むようにヘルパーを変更します。itemControllerserver

{{#each controller itemController="server"}}

App.ServerControllerこれにより、コレクション内のサーバーごとにのインスタンスを作成するように Ember に指示されます。サーバー モデルはcontent、各アイテム コントローラーのプロパティになります。App.ServerController次に、次のように実装します。

App.ServerController = Ember.ObjectController.extend({
  status: function() {
    if(this.get('percentFree') <= 0.50) {
      return "warning";
    } else {
      return "success";
    }
  }.property('percentFree')
});

Ember.ObjectControllerコントローラーがモデル オブジェクトからすべてのプロパティをプロキシするように拡張します。statusに依存する計算されたプロパティとして実装しpercentFreeます。

また、モデルからステータスに関するすべてを削除します。

{{each}}ヘルパーの詳細については、 Ember.js API ドキュメントを参照してください。

于 2013-06-07T05:35:39.457 に答える
0

値が 2 つしかないので、次のようにします。

<tr {{bindAttr class="percent_status:warning:success"}} >

あなたのモデルでは：

  percent_status: function() {
    return this.percentFree <= 0.50 ? true : false;
  }.property('percentFree')

プロパティ値にバインドできます。

<tr {{bindAttr class="percent_status"}} >

ビュー内のものがより複雑になり始め、特別なクラスやその他のロジックが必要になると、私はすべてを実際のビューに移動する傾向があります。

JSBin: http://jsbin.com/ucanam/99/edit

于 2013-06-05T20:57:30.270 に答える