4

単一の例でテンプレート、ビュー、およびコンポーネントの使用法をコンテキストに入れるコードスニペット(jsfiddle、おそらく例)を持っている人はいますか? どちらを使用するか、どのように使用するかの実用的なデモンストレーションを探しています。特に、概念的に非常に近いと思われるビューとコンポーネント。

ガイドは、より複雑なイベント処理が必要な場合のビューを提案します。

特に、これらの慣用的なアプローチを使用して、コードの再利用を改善し、DRY ビュー レイヤー コードを増やす方法について詳しく知りたいと思っています。特に、ネストされたビュー階層の作成と、イベントのバブリングの管理方法について疑問に思っています。

4

1 に答える 1

3

99% の場合、必要なのはテンプレートだけであることがわかりました。ビューは、テンプレートを操作する必要がある場合や、再利用したい UI がある場合に使用します。例として、アプリ内のいくつかの異なる場所で使用する必要がある複雑なユーザー操作を行うツリービューのビュー コンポーネントを作成しました。また、ビューを使用して、ブラウザーのスクロール アクションをビュー内のメソッドにバインドするテンプレート内のデータで「無限」スクロールを処理しました。これにより、コントローラーのメソッドがトリガーされ、Web ページが一番下までスクロールされたときに、より多くの結果が取得されます。

App.CompoundPathwaysIndexView = Ember.View.extend({
  didInsertElement: function() {
    var view = this;
    $(window).bind("scroll", function() {
      view.didScroll();
    });
  },

  willDestroyElement: function() {
    $(window).unbind("scroll");
  },

  didScroll: function() {
    if(this.isScrolledToBottom() && !this.get('controller').get('fetching')) {
      this.get('controller').set('fetching', true);
      this.get('controller').send('fetchMore');
    }
  },

  isScrolledToBottom: function() {
    var documentHeight = $(document).height();
    var windowHeight = $(window).height();
    var top = $(document).scrollTop();
    var scrollPercent = (top/(documentHeight-windowHeight)) * 100;

    return scrollPercent > 99;
  }
});

ビューの他の例は、テンプレートが didInsertElement メソッドを使用してレンダリングされた後にスクリプト タグをテンプレートに挿入することです (これらをハンドルバー テンプレートに追加することは明らかに悪い習慣であるため) 。

たとえば、テキスト ボックスでブートストラップの先行入力機能を有効にすると、次のようになります。

テンプレート:

{{input type="text" placeholder="search" value=search action="query" id="search_box" class="search-query span4"}}

景色：

App.ApplicationView = Ember.View.extend({
    didInsertElement: function() {
      $('#search_box').typeahead({
        source: function (query, process) {
            $.getJSON(typeaheadUrl, { query: query }, function (data) {
                return process(data);
            })
        }
      });
    }
});
于 2013-10-28T15:15:52.867 に答える