Question

是否有人在一个示例中有一个代码片段（jsfiddle，也许是示例），它将模板，视图和组件的使用放入上下文中？寻找何时以及如何使用一个与另一个相比的实际演示。特别是在概念上非常接近的视图和组件。

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

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

Answer 1

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

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方法呈现模板后将inject脚本标记放入模板中（因为在手柄模板中添加这些标记显然是不好的做法）。

例如，在文本框中激活bootstrap预先输入功能：

模板：

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

Ember JS：模板，视图和组件

1 个答案: