ember.js - Ember JS : templates, View 和组件

Question

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

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

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

Answer 1

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

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

其他 View 示例是 inject在使用 didInsertElement 方法渲染模板后将脚本标记到模板中(因为在 Handlebars 模板中添加这些显然是不好的做法)。

例如，在文本框上激活 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);
            })
        }
      });
    }
});