这个例子并不复杂，但涵盖了ember的很多基本概念
1、看下index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="author" content="Joachim Haagen Skeie">
<title>Ember.js Chapter 1 - Notes</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/master.css" type="text/css" charset="utf-8">
<script src="js/scripts/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scripts/bootstrap-modal.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scripts/handlebars-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scripts/ember-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scripts/ember-data-beta-1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scripts/ember-data-localstorage.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app/app4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/x-handlebars" id="application">
{{outlet}}
</script>
<script type="text/x-handlebars" id="notes">
<div id="notes" class="azureBlueBackground azureBlueBorderThin">
{{input valueBinding="newNoteName"}}
<button class="btn btn-default btn-xs" {{action "createNewNote"}}>New Note</button>
<div class="list-group" style="margin-top: 10px;">
{{#each controller}}
{{#linkTo "notes.note" this class="list-group-item"}}
{{name}}
{{#if introduction}}<br />{{introduction}}{{/if}}
<button class="btn btn-danger btn-xs pull-right" {{action "doDeleteNote" this}}>Delete</button>
{{/linkTo}}
{{/each}}
</div>
</div>
{{outlet}}
{{partial confirmDialog}}
</script>
<script type="text/x-handlebars" id="notes/note">
<div id="selectedNote">
{{#if model}}
<h1>name: {{controller.model.name}}</h1>
{{view Ember.TextArea valueBinding="value"}}
<button class="btn btn-primary form-control mediumTopPadding" {{action "updateNote"}}>Update</button><br />
{{/if}}
</div>
</script>
<script type="text/x-handlebars" id="confirmDialog">
<div id="confirmDeleteNoteDialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header centerAlign">
<h1 class="centerAlign">Delete selected note?</h1>
</div>
<div class="modal-body">
Are you sure you want to delete the selected Note? This action cannot be be undone!
</div>
<div class="modal-footer">
<button class="btn btn-default" {{action "doCancelDelete"}}>Cancel</button>
<button class="btn btn-primary" {{action "doConfirmDelete"}}>Delete Note</button>
</div>
</div>
</div>
</div>
</script>
</head>
<body>
</body>
</html>
2、app.js
var Notes = Ember.Application.create({
});
/** 路由Router **/
Notes.Router.map(function () {
this.resource('notes', {path: "/"}, function() {
this.route('note', {path: "/note/:note_id"});
});
});
Notes.NotesRoute = Ember.Route.extend({
model: function() {
return this.store.find('note');
}
});
Notes.NotesNoteRoute = Ember.Route.extend({
model: function(note) {
return this.store.find('note', note.note_id);
}
});
/** 模型Ember Data **/
Notes.Note = DS.Model.extend({
name: DS.attr('string'),
value: DS.attr('string'),
introduction: function() {
var intro = "";
if (this.get('value')) {
intro = this.get('value').substring(0, 20);
}
return intro;
}.property('value')
});
Notes.Store = DS.Store.extend({
adapter: DS.LSAdapter
});
/** 控制器 Controller**/
Notes.NotesController = Ember.ArrayController.extend({
needs: ['notesNote'],
newNoteName: null,
selectedNoteBinding: 'controllers.notesNote.model',
actions: {
createNewNote: function() {
var content = this.get('content');
var newNoteName = this.get('newNoteName');
var unique = newNoteName != null && newNoteName.length > 1;
content.forEach(function(note) {
if (newNoteName === note.get('name')) {
unique = false; return;
}
});
if (unique) {
var newNote = this.store.createRecord('note');
newNote.set('id', newNoteName);
newNote.set('name', newNoteName);
newNote.save();
this.set('newNoteName', null);
} else {
alert('Note must have a unique name of at least 2 characters!');
}
},
doDeleteNote: function (note) {
this.set('noteForDeletion', note);
$("#confirmDeleteNoteDialog").modal({"show": true});
},
doCancelDelete: function () {
this.set('noteForDeletion', null);
$("#confirmDeleteNoteDialog").modal('hide');
},
doConfirmDelete: function () {
var selectedNote = this.get('noteForDeletion');
this.set('noteForDeletion', null);
if (selectedNote) {
this.store.deleteRecord(selectedNote);
selectedNote.save();
if (this.get('controllers.notesNote.model.id') === selectedNote.get('id')) {
this.transitionToRoute('notes');
}
}
$("#confirmDeleteNoteDialog").modal('hide');
}
}
});
Notes.NotesNoteController = Ember.ObjectController.extend({
myAwesomeProperty: "Yes its Awesome!",
actions: {
updateNote: function() {
var content = this.get('content');
console.log(content);
if (content) {
content.save();
}
}
}
});