Skip to content

Commit

Permalink
Move main html parts to ApplicationView as a ContainerView.
Browse files Browse the repository at this point in the history
Most of the non-dynamic (from routing point of view) views should reside in application view.
  • Loading branch information
stas committed Jun 23, 2012
1 parent e9c6524 commit 8183459
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 67 deletions.
10 changes: 2 additions & 8 deletions dependency-examples/emberjs_require/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,7 @@
<![endif]-->
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
</header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<section id="todoapp"></section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
Expand All @@ -31,4 +25,4 @@ <h1>todos</h1>
<script src="../../assets/base.js"></script>
<script data-main="js/app.js" src="js/lib/require/require.js"></script>
</body>
</html>
</html>
10 changes: 4 additions & 6 deletions dependency-examples/emberjs_require/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,18 @@ define( 'app', [
'app/router',
'app/models/store',
'app/controllers/entries',
'app/views/application',
'jquery',
'ember'
], function( Router, Store, EntriesController ) {
], function( Router, Store, EntriesController, ApplicationView ) {
var App = Ember.Application.create({
VERSION: '0.2',
rootElement: '#main',
rootElement: '#todoapp',
// Load routes
Router: Router,
// Extend to inherit outlet support
ApplicationController: Ember.Controller.extend(),
ApplicationView: Em.View.extend({
template: Ember.Handlebars.compile( '{{outlet}}' )
}),
// Preload entries controller
ApplicationView: ApplicationView,
entriesController: EntriesController.create(
{ store: new Store( 'todos-emberjs' ) }
)
Expand Down
55 changes: 2 additions & 53 deletions dependency-examples/emberjs_require/js/app/controllers/todos.js
Original file line number Diff line number Diff line change
@@ -1,68 +1,17 @@
define('app/controllers/todos', [
'app/views/stats',
'app/views/filters',
'app/views/clear_button'
],
define('app/controllers/todos', [ 'ember' ],
/**
* Todos controller
*
* Main controller inherits the `Entries` class
* which is an `ArrayProxy` linked with the `Store` model
*
* @param Class StatsView, stats view class
* @param Class FiltersView, filters view class
* @param Class ClearBtnView, clear button view class
* @returns Class
*/
function( StatsView, FiltersView, ClearBtnView ) {
function() {
return Ember.Controller.extend({
viewsLoaded: false,

// New todo input
InputView: Ember.TextField.extend({
placeholder: 'What needs to be done?',
elementId: 'new-todo',
insertNewline: function() {
var value = this.get( 'value' );
if ( value ) {
this.get( 'content' ).createNew( value );
this.set( 'value', '' );
}
}
}),

// Handle visibility of some elements as items totals change
visibilityObserver: function() {
$( '#main, #footer' ).toggle( !!this.getPath( 'content.total' ) );
}.observes( 'content.total' ),

// Checkbox to mark all todos done.
MarkAllChkbox: Ember.Checkbox.extend({
elementId: 'toggle-all',
checkedBinding: 'content.allAreDone'
}),

// Activates secondary views when content was set
initViews: function() {
var entries = this.get( 'content' );

if ( this.get( 'viewsLoaded' ) || Ember.none( entries ) )
return;

this.set( 'inputView', this.InputView.create({ content: entries }) );
this.set( 'markAllChkbox', this.MarkAllChkbox.create({ content: entries }) );
// this.set( 'itemsView', ItemsView.create({ controller: this }) );
this.set( 'statsView', StatsView.create({ controller: entries }) );
this.set( 'filtersView', FiltersView.create() );
this.set( 'clearBtnView', ClearBtnView.create({ controller: entries }) );

this.get( 'inputView' ).appendTo( 'header' );
this.get( 'markAllChkbox' ).appendTo( '#main' );
// this.get( 'itemsView' ).appendTo( '#main' );
this.get( 'statsView' ).appendTo( '#footer' );
this.get( 'filtersView' ).appendTo( '#footer' );
this.get( 'clearBtnView' ).appendTo( '#footer' );
}.observes( 'content' )
});
}
);
65 changes: 65 additions & 0 deletions dependency-examples/emberjs_require/js/app/views/application.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
define('app/views/application', [
'app/views/stats',
'app/views/filters',
'app/views/clear_button',
'ember'
],
/**
* Main application view
*
* @param Class StatsView, stats view class
* @param Class FiltersView, filters view class
* @param Class ClearBtnView, clear button view class
* @returns Class
*/
function( StatsView, FiltersView, ClearBtnView ) {
return Ember.ContainerView.extend({
childViews: [ 'headerView', 'mainView', 'footerView' ],
headerView: Ember.ContainerView.create({
childViews: [ 'titleView', 'createTodoView' ],
elementId: 'header',
tagName: 'header',
titleView: Ember.View.create({
tagName: 'h1',
template: function() {
return 'todos';
}
}),
createTodoView: Ember.TextField.create({
entriesBinding: 'controller.namespace.entriesController',
placeholder: 'What needs to be done?',
elementId: 'new-todo',
insertNewline: function() {
var value = this.get( 'value' );
if ( value ) {
this.get( 'entries' ).createNew( value );
this.set( 'value', '' );
}
}
}),
}),
mainView: Em.ContainerView.create({
elementId: 'main',
tagName: 'section',
childViews: [ 'outletView', 'markAllChkbox' ],
outletView: Ember.View.create({
template: Ember.Handlebars.compile( '{{outlet}}' ),
}),
markAllChkbox: Ember.Checkbox.create({
entriesBinding: 'controller.namespace.entriesController',
elementId: 'toggle-all',
checkedBinding: 'entries.allAreDone'
}),
}),
footerView: Ember.ContainerView.create({
elementId: 'footer',
tagName: 'footer',
childViews: [
StatsView.create(),
FiltersView.create(),
ClearBtnView.create()
]
})
})
}
);

0 comments on commit 8183459

Please sign in to comment.