Ember JS: Templates, Views, and Components

Question

Does anyone have a piece of code (like jsfiddle, maybe) that puts contextual use of templates, views and components in one example? Looking for a practical demonstration of when and how to use to use one against the other. Especially the views and components that seem conceptually very close.

Guides offer views when more sophisticated event handling is required.

In particular, I am interested in learning more about how you use these idiomatic approaches for better code reuse and more DRY code for the view level. Of particular interest is the creation of a hierarchy of nested views and the control of bubbling events.

Answer 1

I found that for 99% of the time patterns, all you need. Views are when you need to interact with a template or have a user interface that you want to reuse. As an example, I created a view component for tree in which there was some complicated user interaction that I needed to use in several different places in the application. I also used views to handle endless scrolling with data in a template, which binds the browser scroll action to a method in the view. Then it runs the method in the controller to get more results when scrolling the web page at the bottom:

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

Other examples of views are pasting script tags into a template after rendering it using the didInsertElement method (since it seems to be a bad practice to add them to the steering template).

For example, activating the bootstrap typeahead function in a text field:

Template:

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

View:

 App.ApplicationView = Ember.View.extend({ didInsertElement: function() { $('#search_box').typeahead({ source: function (query, process) { $.getJSON(typeaheadUrl, { query: query }, function (data) { return process(data); }) } }); } });