Backone初探——学生信息管理

最新推荐文章于 2022-01-04 21:47:40 发布

JLinZen

最新推荐文章于 2022-01-04 21:47:40 发布

阅读量870

点赞数 1

分类专栏： Javascript 文章标签： mvc backbone

本文链接：https://blog.csdn.net/jl244981288/article/details/47043521

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Backone初探——学生信息管理

-下面是我做的给一个简单的学生信息管理，可以增加学生，删除学生，总体感觉用Backbone思路是最重要的，也就是MVC思想。具体的backboneAPI 可以查看这里：backbone中文API
-下面是整个APP页面功能的展示
页面功能展示

页面代码

-ps:记得自己引用jquery,underscore,backbone的 js库。

<html>
    <head lang="en">
        <title>backbone的小实例</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="underscore.js"></script>
        <script type="text/javascript" src="backbone.js"></script>
        <style type="text/css">
            table {
                width: 600px;
                table-layout: fixed;
            }
            td {
                height: 24px;
                text-align: center;
                vertical-align: middle;
                border: 1px solid #D2D2D2;
            }
        </style>
    </head>
    <body>
        <div id="stuManage">
            <p><label for="name"><span style="color: red;">* </span>姓名：</label><input type="text" name="name" id="name" /></p>
            <p>
                <lable for="gender">性别：</lable>
                <input type="radio" name="gender" value="男" checked="checked"/><span>男</span>
                <input type="radio" name="gender" value="女"/><span>女</span>
            </p>
            <p><label for="name"><span style="color: red;">* </span>系部名称：</label><input type="text" name="department" id="department" /></p>
            <p>
                <input type="button" id="addBtn" value="增加"/>
            </p>
            <table id="stuList" cellspacing="0" cellpadding="0">
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>系部名称</td>
                    <td>操作</td>
                </tr>
            </table>
        </div>
        <script id="stu-temp" type="text/template">
            <td><%= name%></td>
            <td><%= gender%></td>
            <td><%= department%></td>
            <td><a href="javascript:void(0);">删除</a></td>
        </script>
        <script type="text/javascript">
            $(function() {
                var Student = Backbone.Model.extend({
                    validate: function(stu) {
                        for(var attr in stu) {
                            if((attr == 'name' && stu[attr] == '') || (attr == 'department' && stu[attr] == '')) {
                                return '带 * 项不能为空！';
                            }
                        }
                    }
                });

                var StudentList = Backbone.Collection.extend({
                    model: Student
                });

                var studentList = new StudentList();

                var StudentView = Backbone.View.extend({
                    tagName: 'tr',
                    template: _.template($('#stu-temp').html()),
                    events: {
                      'click td a': 'del'
                    },
                    del: function() {
                        this.model.destroy();
                    },
                    initialize: function() {
                        this.model.on('destroy', this.remove, this);
                    },
                    remove: function() {
                        $(this.el).remove();
                    },
                    render: function() {
                        $(this.el).html(this.template(this.model.toJSON()));
                        return this;
                    }
                });

                var AppView = Backbone.View.extend({
                    el: $('#stuManage'),
                    events: {
                        'click #addBtn': 'newStu'
                    },
                    initialize: function() {
                        studentList.bind('add', this.addData, this);
                    },
                    newStu: function() {
                        var stu = new Student(), objData = {};
                        $('#name, #department').each(function() {
                            objData[$(this).attr('name')] = $(this).val();
                        });
                        var gender = $('input[name="gender"][checked]');
                        objData[gender.attr('name')] = gender.val();
                        stu.bind('invalid', function(model, error){
                            $('<span />').css('color','red').appendTo($('body')).html(error);
                            setTimeout(function() {$('span').last().hide().remove();},2000);
                        });
                        if(stu.set(objData, {validate: true})) {
                            studentList.add(stu);
                        }
                    },
                    addData: function(stu) {
                        var stuView = new StudentView({model: stu});
                        $('#stuList').append(stuView.render().el);
                        $('#name,#department').each(function() {
                            $(this).val('');
                        });
                    }
                });
                new AppView();
            });
        </script>
    </body>
</html>

JLinZen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Backone初探——学生信息管理

Backone初探——学生信息管理-下面是我做的给一个简单的学生信息管理，可以增加学生，删除学生，总体感觉用Backbone思路是最重要的，也就是MVC思想。具体的backboneAPI 可以查看这里：backbone中文API -下面是整个APP页面功能的展示页面代码-ps:记得自己引用jquery,underscore,backbone的 js库。<html> <head lang
复制链接

扫一扫

专栏目录