Ember JS：模板，視圖和組件

Question

有沒有人有一個代碼片段（jsfiddle，也許是個例子），將模板，視圖和組件的用法放在一個示例中？尋找關於何時以及如何使用以及如何使用其中一個的實際演示。特別是在概念上非常接近的視圖和組件。

當需要更復雜的事件處理時，指南會提示視圖。

特別是，我有興趣瞭解更多關於如何使用這些慣用方法的更好的代碼重用和更多DRY視圖層代碼。特別想知道如何創建嵌套視圖層次結構以及如何管理事件冒泡。

Answer 1

我發現99％的時間模板都是你需要的。視圖是當你需要與模板交互或者有一個你想要重用的UI事物時。作爲示例，我爲tree視圖創建了一個視圖組件，該視圖具有一些複雜的用戶交互，我需要在應用程序的幾個不同位置使用這些交互。 我也使用視圖來處理'無限'scrolling與模板中的數據，該模板將瀏覽器滾動操作綁定到視圖中的方法。然後，這觸發控制器來獲取更多的結果的方法當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; 
    } 
}); 

的觀點其它實例爲inject腳本標籤的模板它使用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); 
      }) 
     } 
     }); 
    } 
});