Skip to content

T
todomvc
Commit 8183459d authored by Stas SUȘCOV's avatar Stas SUȘCOV
Browse files
Options

Move main html parts to `ApplicationView` as a `ContainerView`. 

Most of the non-dynamic (from routing point of view) views should reside in application view.
parent e9c6524b
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 67 deletions
dependency-examples/emberjs_require/index.html
View file @ 8183459d
......@@ -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>
......@@ -31,4 +25,4 @@
<script src="../../assets/base.js"></script>
<script data-main="js/app.js" src="js/lib/require/require.js"></script>
</body>
</html>
\ No newline at end of file
</html>
dependency-examples/emberjs_require/js/app.js
View file @ 8183459d
......@@ -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' ) }
)
......
dependency-examples/emberjs_require/js/app/controllers/todos.js
View file @ 8183459d
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' )
});
}
);
dependency-examples/emberjs_require/js/app/views/application.js 0 → 100644
View file @ 8183459d
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()
]
})
})
}
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7