ember.js - Ember JS：模板、视图和组件

Question

有没有人有一个代码片段（jsfiddle，也许是例子）在一个例子中将模板、视图和组件的使用置于上下文中？寻找何时以及如何使用一个与另一个的实际演示。尤其是在概念上看起来非常接近的视图和组件。

当需要更复杂的事件处理时，指南会建议视图。

特别是我有兴趣了解更多关于如何使用这些惯用方法来更好地重用代码和更多 DRY 视图层代码的信息。特别想知道嵌套视图层次结构的创建以及如何管理事件冒泡。

Answer 1

我发现在 99% 的时间里，你只需要模板。视图是当您需要与模板交互或拥有要重用的 UI 事物时。作为示例，我为树视图创建了一个视图组件，该视图组件具有一些复杂的用户交互，我需要在应用程序的多个不同位置使用这些交互。我还使用视图来处理模板中数据的“无限”滚动，该模板将浏览器滚动操作绑定到视图中的方法。然后，当网页滚动到底部时，这会触发控制器中的一个方法来获取更多结果：

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 方法渲染模板后将脚本标签注入到模板中（因为在把手模板中添加这些显然是不好的做法）。

例如，在文本框上激活 bootstrap typeahead 功能：

模板：

{{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);
            })
        }
      });
    }
});