Views not using application template

Testing the event flow between views and controller

by mgrassotti

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<body>
    <h3>Widget 1:</h3><div id='widget1'></div><hr/>
    <h3>Widget 2:</h3><div id='widget2'></div><hr/>
<!--Define Handlebars template with name 'Parent' -->
    <script type="text/x-handlebars" data-template-name="parent">
        <fieldset>
            <legend>Parent View </legend>
            <input type="button" value="Parent View Click" {{action parentViewClick target="view"}} />
            <input type="button" value="Parent Controller Click" {{action parentControllerClick }} />
           {{render "child"}}
        </fieldset>
    </script>

    <script type="text/x-handlebars" data-template-name="child">
        <fieldset>
            <legend>Child View </legend>
            <input type="button" value="Child View Click" {{action childViewClick target="view"}} />
            <input type="button" value="Child Controller Click" {{action childControllerClick }} />
        </fieldset>
    </script>
    <script type="text/x-handlebars" data-template-name="widget2">
        Widget 2 template!
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="parent2">
        <fieldset>
            <legend>Parent View </legend>
            <input type="button" value="Parent View Click" {{action parentViewClick target="view"}} />
            <input type="button" value="Parent Controller Click" {{action parentControllerClick }} />
           {{render "child"}}
        </fieldset>
    </script>

    <script type="text/x-handlebars" data-template-name="child2">
        <fieldset>
            <legend>Child View </legend>
            <input type="button" value="Child View Click" {{action childViewClick target="view"}} />
            <input type="button" value="Child Controller Click" {{action childControllerClick }} />
        </fieldset>
   ...

JavaScript

var Widget1App = Ember.Application.create({
  rootElement: '#widget1',
  history: 'none',
  ParentView: Ember.View.extend({
    templateName: 'parent',
    parentViewClick: function () {
        alert('ParentViewClick handled!');
    }
  }),
  ParentController: Ember.Controller.extend({
    parentControllerClick: function () {
        alert('ParentControllerClick handled!');
    }
  }),
  ChildView: Ember.View.extend({
    templateName: 'child',
    childViewClick: function () {
        alert('childViewClick handled!');
    }
  }),
  ChildController: Ember.Controller.extend({
    childControllerClick: function () {
        alert('childControllerClick handled!');
    }
  })
});

Widget1App.Router.map(function() {
  this.route("parent", { path: "/" });
});


var Widget2App = Ember.Application.create({
  rootElement: '#widget2',
  history: 'none',
  ApplicationView: Ember.View.extend({
    templateName: 'widget2',
  }),
  ParentView: Ember.View.extend({
    templateName: 'parent2',
    parentViewClick: function () {
        alert('widget2 ParentViewClick handled!');
    }
  }),
  ParentController: Ember.Controller.extend({
    parentControllerClick: function () {
        alert('widget2 ParentControllerClick handled!');
    }
  }),
  ChildView: Ember.View.extend({
    templateName: 'child2',
    childViewClick: function () {
        alert('widget2 childViewClick handled!');
    }
  }),
  ChildController: Ember.Controller.extend({
    childControllerClick: function () {
        alert('widget2 childControllerClick handled!');
    }
  }),
});

Widget2App.Router.map(function() {
  this.route("parent", { path: "/" });
});