Ember.js simple widget

Question

I have been trying to get my head wrapped around Ember.JS and have gone through tons of documentation and threads, but I get endless mixed tones and different directions from each of them. I am trying to put a simple widget together which would have a:

Nav
Body
Footer

I started out with very simple application, and I am imagining that I would have a parent view and within that parent view I would children/nested views. For example, I would have:

Nav View
Body View
Footer View

I just don't know how to implement nested views. This is the code I have: var App = Ember.Application.create();

    App.ApplicationController = Ember.Controller.extend();
    App.ApplicationView = Ember.View.extend({
      templateName: 'application'
    });

    App.aplicationController = Ember.Controller.extend();

    App.Router = Ember.Router.extend({
      root: Ember.Route.extend({
        index: Ember.Route.extend({
          route: '/'
        })
      })
    })

    App.initialize();

I would highly appreciate any help with this please. Thank you.

score 4 · Accepted Answer · edited Nov 06 '12 at 01:41

4

There are a few ways to create nested views. I've created a simple JSFiddle to demonstrate two of those ways: using the view Handlebars helper, and using outlets.

http://jsfiddle.net/QU2BQ/2/

Hope that helps. Reply here if you have any questions.

edited Nov 06 '12 at 01:41

nicholaides

19,211
12
66
82

answered Nov 05 '12 at 06:21

Luke Melia

8,389
33
41

I really appreciate your help. I have gone over the fiddle a few times. I had couple of question with regards to switching views: Current Fiddle demo is wonderful, I wonder if I to lets say put couple of nav links and would like to update the views when user clicks on any of the nav links, can you please demo that which I would be very grateful for. Thank you. – Combustion007 Nov 06 '12 at 04:29
@MilkyWayJoe has a good answer and fiddle for nav links here: http://stackoverflow.com/questions/11318572/right-way-to-do-navigation-with-ember – Luke Melia Nov 06 '12 at 05:42

Ember.js simple widget

1 Answers1