Created
December 19, 2011 14:23
-
-
Save mlomnicki/1497436 to your computer and use it in GitHub Desktop.
ember.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Ember.js - some concerns | |
//a) tightly coupling | |
App.NewGameView = Em.View.extend({ | |
click: function() { | |
App.lobbyController.newGameClicked(); | |
} | |
}) | |
// This is pain when it comes to testing - view is coupled with controller | |
// b) pass controller as a param - better but initialization is done in HTML | |
<script type="text/x-handlebars"> | |
{{view NewGameView controller=App.lobbyController}} | |
</script> | |
App.NewGameView = Em.View.extend({ | |
click: function() { | |
this.controller.newGameClicked() | |
} | |
}) | |
// Now it's not clear where does 'controller' come from. Also controller should be assigned in some | |
// bootstrap code - not in HTML. HTML should remain as clear as possible. | |
// c) use bootstrap code - even better but can't render instantiated views | |
// bootstrap code: | |
App.lobbyController = App.LobbyController.create(); | |
App.newGameView = App.NewGameView.create({controller: lobbyController}) | |
// view | |
<script type="text/x-handlebars"> | |
{{view App.newGameView}} | |
</script> | |
// Fails - expecting class not an instance | |
// The view must be appended in the bootstrap code | |
// App.newGameView.appendTo('#lobby') | |
// That's OK but doesn't seem to be preferred approach in ember. | |
//d) params aren't passed to constructor | |
App.Player.create({cards: [{suit: 'Hearts', face: 'King'}, {suit: 'Spades', face: 'Queen'}]}) | |
App.Player = Em.Object.extend({ | |
init: function() { | |
this.cards = this.cards.map(function(cards_data) { | |
App.Card.create(card_data); | |
}); | |
} | |
}) | |
//Preferably params are passed to the constructor | |
init: function(params) { | |
this.cards = params.cards.map(function(cards_data) { | |
App.Card.create(card_data); | |
}); | |
// Eventually controllers would be clearly assigned as well: | |
App.NewGameView = Em.View.extend({ | |
init: function(params) { | |
this.controller = params.controller; | |
}, | |
click: function() { this.controller.newGameClicked(); } | |
}) | |
// Ideally a developer isn't forced to use controller in constructor | |
init: function(controller) { | |
this.controller = controller; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment