How could I see the newly created record without Ember Data?

1 
I didn't use Ember Data in my app, I just use localStorage to restore my data, but when I created a new record, the record list didn't show the newly added record. I have to refresh the whole page to see the new record. Any way to see the newly added record right after I created the record without refreshing the page?

controller code(part) :

var Notes = Em.Application.create({
    LOG_TRANSITIONS : true
});
var notes = getNotes();

Notes.Note = Em.Object.extend({
    id : null,
    name : 'empty',
    save : function() {
        var notes = getNotes();
        notes.push({
            id : this.get('id'),
            name : this.get('name')
        });
        localStorage.setItem('notes', JSON.stringify(notes));
    }
});

function getNotes() {
    var notes = [];
    var ls_notes = localStorage.getItem('notes');
    if (ls_notes) {
        notes = eval(ls_notes);
    }
    return notes;
}

function getNoteById(id) {
    var note = {};
    for (var i in notes) {
        if (notes[i] && notes[i].id == id) {
            note = notes[i];
            break;
        }
    }
    return note;
}


Notes.Router.map(function() {
  // put your routes here
  this.resource('notes', {path : '/'}, function() {
      this.route('note', {path : '/note/:note_id'});
  });
});

Notes.NotesRoute = Em.Route.extend({
    model : function() {
        return getNotes();
    }
});

Notes.NotesController = Em.ArrayController.extend({

    newNoteName : null,

    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.name) {
                    unique = false;
                    return;
                }
            });

            if (unique) {
                var newNote = Notes.Note.create({
                    id : newNoteName,
                    name : newNoteName
                });
                newNote.save();
                content.push(newNote);
                this.set('newNoteName', null);
                this.transitionToRoute('notes');
            } else {
                alert('Note must have a unique name of at least 2 characters!');
            }
        },
        clearAllNotes : function() {
            localStorage.clear();
        }
    }

});

template :

<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>
      <button class="btn btn-default btn-xs" {{action "clearAllNotes"}}>
        Clear
      </button>
    </div>

    <div class="list-group" style="margin-top : 10px;">
      {{#each controller}}
        <div class="list-group-time">
          {{#link-to "notes.note" this class="list-group-item"}}
            {{name}}
          {{/link-to}}
        </div>
      {{else}}
        No notes found :(
      {{/each}}
    </div>
    {{outlet}}
  </script>