bobamo /examples/login-example/public/js/views/employee/list.js

Language Javascript Lines 55
MD5 Hash cbd88d7289bba8d7b3ba4922abf82709
Repository git://github.com/jspears/bobamo.git View Raw File
| Open JSFiddle
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
define(['Backbone', 'jquery', 'underscore', 'collections/employee', 'text!tpl/employee-list-item.html'], function (Backbone, $, _, collection, employeeListItem) {
    var EmployeeListView = Backbone.View.extend({
//        el:'#content',
        tagName:'ul',

        className:'nav nav-list',

        initialize:function () {
            var self = this;
            if (!this.model){
                this.model = new collection.EmployeeCollection();
                this.model.fetch();
            }
            this.model.bind("reset", this.render, this);
            this.model.bind("add", function (employee) {
                console.log('add', employee);
                $(self.el).append(new EmployeeListItemView({model:employee}).render().el);
            });
        },

        render:function (obj) {
            if (this.options && this.options.container){
                var $c = $(this.options.container);
                $c.empty().append($(this.el));
            }
            $(this.el).empty();
            this.$el.append('<li><a class="btn btn-mini pull-right" href="#/employee/edit"><b class="icon-edit"/>Create Employee</a></li>')
            this.$el.append('<li style="clear:right"><br/></li>')
            _.each(this.model.models, function (employee) {
                $(this.el).append(new EmployeeListItemView({model:employee}).render().el);
            }, this);
            if(this.model.models.length == 0){
                this.$el.append('<li style="clear:right"><p class="alert alert-info">No Employees Found</p></li>');
            }
            return this;
        }
    });
    var EmployeeListItemView = Backbone.View.extend({

        tagName:"li",

        initialize:function () {
            this.template = _.template(employeeListItem);
            this.model.bind("change", this.render, this);
            this.model.bind("destroy", this.close, this);
        },

        render:function (eventName) {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        }

    });
    return EmployeeListView;
});
Back to Top