我正在努力适应 Ember.js 架构的布局。有人可以给我提示和技巧,以最合适的方式构建我的应用程序。
<html>
<head>
<script src="../script/library/jquery.js"></script>
<script src="../script/library/handlebars.js"></script>
<script src="../script/library/ember.js"></script>
<script>
$(document).ready(function(){
Application = Ember.Application.create();
Application.ApplicationView = Ember.View.extend({
templateName: 'application'
});
Application.ApplicationController = Ember.Controller.extend();
Application.Cat = Ember.Object.extend({
name: null,
breed: null
});
Application.CatView = Ember.View.extend({
templateName: 'catCreate'
});
Application.CatController = Ember.Controller.extend({
content: null,
create: function() {
alert("controller uploading: " + this.get('content').name);
}
});
Application.Router = Ember.Router.extend({
root: Ember.Route.extend({
createCat: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('cat', Application.Cat.create());
}
})
})
});
Application.initialize();
});
</script>
</head>
<body lang="en">
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="catCreate">
<h1>Cat Detail</h1>
{{view Ember.TextField id="name" valueBinding="content.name"}}<br/>
{{view Ember.TextField id="breed" valueBinding="content.breed"}}<br/>
<button {{action "create" target="controller"}}>Done</button>
</script>
</body>
</html>