2

コードの匂いのように見えるので、これがここでの最善の方法であるかどうかを理解しようとしています。私がやりたいことは、ボタンをクリックすると読み込み中の状態に変わり、コントローラーがイベントの処理を終了するとデフォルトの状態に戻ることです (基本的には AJAX 呼び出しを行います)。

私のテンプレートは次のようになります。

{{#view App.LoadingButton action="search" data-loading-text="content.loadingText"}}Search{{/view}}

私の見解は次のようになります。

App.LoadingButton = Ember.View.extend({
    tagName: 'button',
    classNames: ['btn', 'btn-primary'],
    attributeBindings: ['type'],
    type: 'button',
    elem: null,
    stateChanged: function () {
        if (this.elem) {
            var loading = this.get('controller').get('content.isLoading');
            if (loading) {
                $(this.elem).button('loading');
            }
            else {
                $(this.elem).button('reset');
            }            
        }        
    },
    click: function (evt) {
        this.elem = this.elem || evt.srcElement;
        this.get('controller').send(this.get('action'));
    },
    didInsertElement: function () {
        this.get('controller').addObserver('content.isLoading', this, 'stateChanged');
    }
});
  1. まず、要素にアクセスする方法が間違っているように見えます。ビューの要素が DOM に追加されているときに、ビューの要素への参照を取得できませんか?
  2. 第二に、モデルから isLoading ブール値フラグを変更するためにコントローラーに依存しているため、ビューはいつ状態を変更するかを認識します。これは、Ember の方法で実装する最良の方法ですか?

Ember の実装を始めたばかりのビデオをたくさん見てきましたが、このようにうまくいくかもしれませんが、何が最善のアプローチであるかを知るのはまだ簡単ではありません。

4

1 に答える 1

4

私がやりたいのは、ボタンをクリックするとロード状態に変わり、コントローラーがイベントの処理（基本的にはAJAX呼び出し）を終了するとデフォルト状態に戻ることです。

あなたは、Emberが人々が離れるのを助けるドキュメント/イベントに焦点を合わせたアーキテクチャ（緊密な表示/相互作用の結合を伴う）を説明しています。Emberは、アプリケーションのデータ状態と、各状態での表示方法の説明に関するものです。Ember自体が、表示するデータの同期を処理します。

これを説明するためのより燃えさしのような方法は次のようになります。

  • 表示動作
    • サーバーと通信しているとき、ボタンにはdisabledクラスがあり、「Loading...」と表示されます。
    • サーバーと通信していないとき、ボタンにはdisabled「検索」と表示されるクラスがありません
    • 対話すると、このボタンは検索アクションをトリガーします

レンプレート：

<button type="button" 
        {{bindAttr class=":btn :btn-primary isLoading:disabled"}} 
        {{action search}}>
  {{#if isLoading}}
    Loading...
  {{else}}
    Search
  {{/if}}
</button>
  • フロー制御動作
    • 検索がトリガーされると、コントローラーisLoadingはtrueになります
    • 検索が完了すると、コントローラーのisLoadingプロパティはfalseになります
    • 検索がすでに進行中の場合は、再検索の試みを無視してください

コントローラ：

App.SomeController = Ember.Controller.extend({
  isLoading: false,
  search: function(){
    if(this.get('isLoading')) { return }

    this.set('isLoading', true);
    $.ajax({
      context: this,
      success: function(){
        this.set('isLoading', false)
      }
    })
  }
});
于 2013-03-16T18:03:53.580 に答える