Ember Js
by Suchit Puri
MVC Code Structure
Models
Storm.NewProperty = Ember.Object.extend({ building_name:"", estate_name: "", street_number_high: "", street_number_low: "", unit_number:"", level_number:"", street_name: "", state: Storm.Options.state_names.content[0].abbreviation, suburb: "", formatted_address: function(){ return //do something on existing properties and compute a new one
}.property('street_number_high','street_number_low') });
Views
Storm.TextField = Ember.View.extend( Storm.AsyncValidation, {
className: "span4", classNames: "control-group", type: 'text', value: "", maxlength:"255", placeholder: "", code: '', appended_text: null, classNameBindings: ['code'], message: "", templateName: "inputs/text-field" });
Controller
Storm.AccessController=Ember.ObjectController.extend(Storm.EnquiryHelper,{
contact_type_options: Storm.Options.contact_type, update_enquiry_details: function(enquiry){ }, validation_check: function(){ if(Ember.isEmpty(this.get('contact_name'))) { var element = $('.validation-check'); element.trigger(Storm.validInputEvent(element.attr("id"))); $('.validation-check .close_button').trigger('click'); } }.observes('contact_name') }
);
Templates
partial "inputs/error_message"
.span12.search-box.asset-box
Storm.AssetSearchBox classNames="span12 asset-search-field"
table.table.table-hover.table-condensed.hidden.asset_search_result.search-result
tbody
each result in view.asset_search_results
Storm.AssetSearchResultView contentBinding='result'
else
tr
td No results found ...
INTERESTING features
Computed properties
Observers
Simple INHERITANCE
Mixins
Convention Over Configuration
Just like Rails
Powerful Router
Models with pluggable backend
Lessons Learnt so far
Neat and organized code
Reusability is built-in
Two way binding is effortless
Very Easy to Test
integrates seamlessly with jasmine
Seamless rails integration
Learning Curve is a bit steep
Jquery plugins needs to be emberized
Community is small , but its growing fast
Ember Js
By Suchit Puri
Ember Js
Suchit Puri
- 2,549