实例2：ember的一个记事本应用程序实例

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_34148340

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cloudhan/p/5539033.html

版权

这个例子并不复杂，但涵盖了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();
            }
        }
    }
});

转载于:https://www.cnblogs.com/cloudhan/p/5539033.html

weixin_34148340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实例2：ember的一个记事本应用程序实例

这个例子并不复杂，但涵盖了ember的很多基本概念1、看下index.html文件<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="...
复制链接

扫一扫