ember.js - Ember での条件の使用

Question

ここに私のjsfiddleリンクがあり、B以外のオプションが選択されている場合、「オプションBを選択してください」というメッセージをドロップダウンの下に出力しようとしています。

オプション B が選択されている場合、ID とオプション名を出力する必要があります

何が起こっているかというと、「オプション B を選択してください」というメッセージが印刷されないということです。常にIDと名前が表示されています。

したがって、Handlebar条件付きにはいくつかの問題があります-

{{#if App.SearchController.selectedB}}

ここで、selectedB は Option が B のときに true を返す関数ですが、これが機能していないようです。

  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }

副次的な質問として、Select Dropdown のスタイルを設定する必要があったため、「class」属性を追加しました。カスタムスタイルが作成されましたが、まだスタイルの 1 つとして ember-select があります。新しい独自のスタイルを追加するときに ember CSS を削除できますか?

score 2 · Accepted Answer

ここで見られる問題は、条件自体に関するものではなく、データの使用方法に関するものです。いくつかのこと：

(詳細はこちら: http://jsfiddle.net/schawaska/enRhT/ )

テンプレートを on に反応させたい場合はselectedB、それを計算されたプロパティにし、その依存関係も指定する必要があります。この場合はselectedNameプロパティです。

selectedB: function() {
    return this.get('selectedName.id') == 2;
}.property('selectedName') // This is important

また、テンプレートでバインディングをインスタンスではなくコントローラクラスに割り当てていることに気付きました。アプリケーションを変更してを含めることを検討してくださいRouter。これにより、モデルデータを別の方法で設定できるようになります。

ルーティングメカニズムを使用すると、コントローラーがルートに割り当てられ、ビュー/テンプレートに自動的にバインドされるため、にバインドする代わりに、またはApp.SearchController.propertyを使用して実行できます。controllercontroller.property

{{view Ember.Select class="my_custom_class"
    contentBinding="controller.content"
    optionValuePath="content.id"
    optionLabelPath="content.firstName"
    selectionBinding="controller.selectedName"}}

これには、さらにいくつかの変更が必要になります。

ルーターの設定

App.Router.map(function() {
    this.route('search');
});
// this would require that you either create an IndexRoute 
// to redirect from the root to the SearchRoute, or
// change the route path: this.route('search', { path: '/' });

コントローラーからではなく、ルートのモデル関数からデータを返す

App.SearchRoute = Em.Route.extend({
    model: function() {
        return [
            {firstName: "Any",  id: 0},
            {firstName: "A",    id: 1},
            {firstName: "B",    id: 2},
            {firstName: "C",    id: 3},
            {firstName: "D",    id: 4},
            {firstName: "E",    id: 5}
        ];
    }
});

{{outlet}}アプリケーションテンプレートへのの追加

<script type="text/x-handlebars">
{{outlet}}
</script>

正しいテンプレートを使用して、テンプレート本体を特定のテンプレートに移動するcontroller

これで、ルートがコントローラーとそのデータを提供するため、Handlebars テンプレートでキーを使用できるようになりcontroller、SearchController が参照されます (以下を参照)。

<script type="text/x-handlebars" data-template-name="search">
    {{view Ember.Select class="my_custom_class"
       contentBinding="controller.content"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="controller.selectedName"}}

    {{#if selectedB}}
      <p>Selected: {{controller.selectedName.firstName}}
      (ID: {{controller.selectedName.id}})</p>
    {{else}}
    <p>Select option B</p>
    {{/if}}    
</script>

固定コントローラー

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,
  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }.property('selectedName')
});

命名規則により、ルートはアプリがSearchController(この正確な名前) を持っていることを期待しており、それがすべてを結び付ける方法です。また、コントローラーがを実装していない場合、ArrayControllerモデル関数がを返し、 (デフォルト)ModelArrayにバインドされないため、コントローラーは爆発します。ObjectController

score 1 · Accepted Answer

ここに作業バージョンがあります。私が変更した最も重要な点のいくつかを次に示します。

コンテンツのセットアップをSearchRoute、それが属する場所に移動しました:

App.SearchRoute = Ember.Route.extend({
  model: function () {
    return [
      Ember.Object.create({firstName: "Any", id: 0}),

extendの代わりに使用するように検索コントローラーを修正し、計算されたプロパティcreateを作成しました。selectedB

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});

SearchController独自のテンプレートを用意し、コントローラーにグローバルとしてアクセスするのではなく、相対プロパティを使用するようにコードを変更しました。contentBindingまた、実際のコンテンツのプロキシとして機能する検索コントローラーを指すように接続しました。
```
<script type="text/x-handlebars" data-template-name="search">

  {{view Ember.Select class="my_custom_class"
         contentBinding="this"
         optionValuePath="content.id"
         optionLabelPath="content.firstName"
         selectionBinding="selectedName"}}
```

他にもいくつかの小さな変更がありました。

ember.js - Ember での条件の使用

2 に答える 2

Related

Reference