Tagged: Ember.js

Ember Conf 2014 Summary and Resources

This is a mainly a list of links to notes that others took and a few of my own notes from Ember Conf.

Some Great Write Ups:

Keynote by Yehuda Katz and Tom Dale

Yehuda Katz and Tom Dale keynote

Slides from the EmberConf keynote

Notes from Allison Sheren

  • "Having the right thing be default is not a small tweak. It's the difference between being productive and not being productive." -- Yehuda Katz (@wycats)
  • "The fact is that the flexibiltiy we think we need, that we want - we really don't. I thi...

Continue Reading →

Ember Conf 2014 Wrap Up

Ember.js' strength as a framework is second only to its power as a community. Over the past two days at Ember Conf I've had a chance to interact with some of the top minds in the Javascript world who are shaping the future of the web. Brian Cardarella did an excellent job summarizing the mood of the conference - "Ember.js picks up where Rails left off." Years ago I remember attending my very first Mountain West Ruby conference and leaving with a similar impression. That same year we attended Rails Conf 2007 in Portland and via a serendipitious conversation with David Heinemeier Hansson I came to understand the counter-culture, rockstar, ninja facade was a carefully engineered marketing play by 37 Signals. That effort worked out very well for them. The press asked for rebels and DHH and company happily complied. I still have the image of DHH's leather jacket embroidered with a dragon emblazed on my memory. Rails was very much 37 Signals and their energy and popular...

Continue Reading →

Ember.js Lessons Learned So Far

Ember.js

Lessons Learned and Stuff

Justin Ball / @jbasdf

Justin Ball

  • CTO Atomic Jolt
  • Consultant, Rubyist, Javascriptist, Cyclist, Maker, Entrepreneur
  • Purveyor of Buzzwords

What is Ember.js?

  • A framework for creating ambitious web applications.
  • Client-side MVC Framework
  • Open Source - Github Pulse
  • Single page apps are sexy
  • Ember.js makes it easy

Easy is exclusive of the tears shed while learning Ember.js

Why Single Page Apps?

iFrames!

Safari and IE no longer let you write a cookie to an iFrame unless the user has visited the site

Real World - LTI apps

Heads Up

  • Ember.js changes a lot
  • Ignore anything over 3 or 4 months old
  • When you choose Ember.js you are all in

Using Rails?

...

Continue Reading →

Open Assessments Code Sprint with OERPub, MIT and Lumen

I've been spending a lot more hours driving back and forth between Salt Lake City and Logan lately than I normally like. Today was spent integrating Open Assessments with OERPub. Soon you'll be able to author an open text book via OER Pub, add an assessment via Open Assessments and embed objective's via MIT's MC3 project. Lumen Learning has funding from the Hewlett Foundation to employ content author's to generate a series of assessments in subjects ranging from physics to biology which means the bank of freely available, open assessments will should begin to fill with high quality content later this spring.

We've made a number of changes to Open Assessments recently including fully implementing the QTI player in Ember.js. This means that the assessment author can choose to host their assessment data (QTI XML) on Open Assessments or on any server that supports CORS. We've also improved the API and added oEmbed support.

Here's a couple of examples from to...

Continue Reading →

Ember Textfield ignores arrow keys. How to monitor key events in your textfield

Ember provides a text field view that makes generating text input fields pretty simple. What's really cool is with the simple addition of onEvent="keyPress" and action="my_function" you can monitor changes to the field as the user types. It looks something like this:

(On a side note you can also just add an observer to your controller for 'value' and it will be called as the user types in new content.)

Even with all this magic I ran into a scenerio that not handled - I needed to know if the user had pressed the arrow up or down keys. A quick dig into the Ember code led me to the Ember.TextSupport mixin. The Ember.TextField view mixes in Ember.TextSupport so you only need to create your own textfield view, extend Ember.TextField and override a couple of the methods from Ember.TextSupport. It looks like this:

Using your new arrow enabled view then looks like this:

Continue Reading →

Using Chosen with Ember.js

Harvest's Chosen select control is handy for cleaning up unwieldy or horribly long select boxes. It's a nice little bit of UI sugar that can help make your users happier and we all like happy users right?. Ember.js is now our Javascript framework of choice but it doesn't always play well with other libraries and plugins - at least not without messsing around with it for a bit.

There are others out there that want to use Chosen in their Ember application. I tweaked the last bit of code in this StackOverflow question a bit to produce a working view that extends Ember.Select.

Here's gist of the code and here's the code:

App.Chosen = Ember.Select.extend({

multiple: false, width: '95%', disableSearchThreshold: 10, searchContains: true, attributeBindings:['multiple', 'width', 'disableSearchThreshold', 'searchContains'],

didInsertElement: function(){ this._super();

var options = {
  multiple: this.get('multipl...

Continue Reading →

Generate Ember.js models using your Rails Schema

I love Ember.js. I hate typing and I especially hate typing code that a machine could build. I got really tired of reading a Rails schema to build new Ember.js models so I create a rake task for it. I make no guarantees that this code will work for you or that it won't delete some of your code or start a nuclear war. Enjoy!

(Link to gist if that's easier.)

(Updated for Ember Data 1.0.0 beta.)


namespace :ember do

desc "Build ember models from schema" task :models => :environment do

# Change these values to fit your project
namespace = 'App' # The Ember application's namespace.
output_dir = File.join(Rails.root, "app/assets/javascripts/common/models") # The directory where ember models will be written

schema_file = File.join(Rails.root, 'db/schema.rb')

current = ''
file = ''
max = 0
attrs = []

File.readlines(schema_file).each do |line|

  # Stuff to ignore
  next if line.strip.blank?
  next if /#.*/.match(line)
  next if /add_index.+/.match(line)
  next if /...

Continue Reading →

Help with Ember.js

So you've discovered the most awesome front end javascript framework ever or at least that's what the cool kids are saying. Now you want so help. Besides StackOverflow here are a few resources that might be helpful:

Continue Reading →

Don't miss the '.' - Computed Property that depends on Ember.ArrayController contents

My fun/stupid ember mistake of the day. I even put together a jsbin to help track down the problem.

It's a tiny problem that is hard to spot. Right there at the very end there's a property declared like this:


  property('selectedContacts.@each')

It wasn't always that way. Once there was this:


  property('[email protected]')

The difference is subtle. It's hard to see especially when you've spent your life typing email addresses. No one misses a period until the entire application stops working and everyone is furious because "It looks just like the #@$@!# sample code." Don't forget the '.' that goes before '@each'.


var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({ model: function(){ var contacts = Ember.ArrayProxy.create({content: []}); contacts.pushObject({name: 'Bill'}); contacts.pushObject({name: 'Sally'}); return contacts; }, s...

Continue Reading →

Immutable Arrays in Ember.js

I ran into another interesting situation with ember.js today. We make a request to the server to get a collection of objects for the application route. That request sends parameters that the server uses to filter the results which means that ember will give you an immutable object. The code is pretty typical and looks like this:


App.ApplicationRoute = Ember.Route.extend({

model: function(){ return App.Course.find({user_id: user_id}); }

});

Note that if you do this and then later on attempt to add new items to the resulting array you might not get any errors - I didn't. Ember does throw an exception but Chrome threw them away. I'm guessing I have something turned off. Since we needed to be able to add new items on the client and have that update the UI. We ended up creating an ArrayProxy, inserting the items into that and then returning that as the model for the route. I don't know if this is the "right way" but it does work:


App.ApplicationRou...

Continue Reading →

Passing a value to ember.js view from handlebars template

This is one of those things that should be easy and it's probably obvious to most people but it threw me for a while. I wanted to pass a value into my ember.js view at the moment that I declare the view. It's a static value, just a css class name, so it doesn't need to be bound to anything. Turns out it's really not that hard:

Add a property to your view:


App.ModalView = Ember.View.extend({
  aClassName: 'modal'
});

When you use the view just set the property:


{{#view App.ModalView aClassName="wide_modal"}}
  Some great content goes here
{{/view}}

Use the value in your template:


  <div {{bindAttr class="view.aClassName"}}>
    More stuff here
  </div>

Continue Reading →

Handle Keyboard events in an Ember.js view

We ran into a situation where we wanted to be able to close our ember.js view (a modal) when the user pressed the esc key. At first I thought the solution was easy and I ended up with some code like this:


App.ModalView = Ember.View.extend({

didInsertElement: function(){ $(document).on('keyup', { _self: this }, this.esc_close); },

esc_close: function(e){ if(e.which == 27){ e.data._self.close(); } },

close: function(controller){ $(document).off('keyup', this.esc_close); this.get('controller').send('modal_close'); }

});

That code worked great until we ran into a situation where the ember view was removed from the DOM via a transition rather than by its own close method. In that situation "this.get('controller')" would be null the next time the user pressed the esc key since the "esc_close" method was still bound to the document's keyup event but the view had actually gone away al...

Continue Reading →

Building with Ember

We're currently building a couple of projects for a group at MIT and for a current Techstars company in the Kaplan program which has given us a chance to try out ember.js on real projects. Ember is an incredible framework started by two really smart guys Yehuda Katz Tom Dale. It's new and it's hot which also means that it's still a bit rough around the edges. However, once you get past a few of the gotchas it's an amazing framework that saves you a lot of time.

So far programming with ember.js has been a great experience. Here's a few notes/issues that I've run into in case this helps someone else:

Be careful what event names you chose inside of your actions.

This one drove me crazy for quite a while. I had the following action setup in a view:


    <a href="#" {{action 'destroy'}} class="btn">Delete</a>
  

I wanted the action to bubble up to the route. However, when I clicked on the link nothing happened. That ...

Continue Reading →