Question

我想对一个集合进行排序，然后使用backboneJS

进行渲染

模板是

<script type="text/template" id="user-list-template">
    <a href="#" class="btn btn-primary" id="by-name">Sort By Name</a>
    <a href="#" class="btn btn-primary" id="by-salary">Sort by Salary</a>
    <a href="#" class="btn btn-primary" id="by-hire-date">Sort by Hire Date</a>

    <table class="table stripped">
        <thead>
            <tr>
                <th>Employee Number</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Hire Date</th>
                <th>Salary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <% _.each(users, function(user){ %>
                <tr>
                    <td><%= user.get('empNumber') %></td>
                    <td><%= user.get('firstName') %></td>
                    <td><%= user.get('lastName') %></td>
                    <td><%= user.get('hireDate') %></td>
                    <td><%= user.get('salary') %></td>
                    <td></td>
                </tr>
            <% }); %>
        </tbody>
    </table>

</script>

然后执行fectching的脚本部分

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
        options.url = 'http://localhost:61855/api' + options.url;
    });


    var Users = Backbone.Collection.extend({
        sort_key: 'empNumber',
        url: '/UserModel',
        initialize: function() {
        },
        comparator: function(item) {
            return item.get(this.sort_key);
        },
        sortByField: function(fieldName) {
            this.sort_key = fieldName;
            this.sort();
        }
    });



    var UserList = Backbone.View.extend({
        el: '.page',
        render: function () {
            var that = this;
            var users = new Users();
            users.fetch({
                success: function (users) {
                    var template = _.template($('#user-list-template').html(), { users: users.models });
                    that.$el.html(template);
                }
            })
        }
    });

    var Router = Backbone.Router.extend({
        routes: {
            '': 'home'
        }
    });
    var userList = new UserList();

    var router = new Router();

    router.on('route:home', function () {
        userList.render();
    });

    Backbone.history.start();
</script>

我是backboneJS的完整菜鸟。基本上按下按钮我想按该类型呈现。我假设我需要处理某种点击事件。有人能指出我正确的方向吗？

Answer 1

下面的代码应该可以使用;

  var UserList = Backbone.View.extend({
    initialize: function(){
        var that = this;
        var users = new Users();
        this.users = users;
        this.users.sort_key = default_sort_key;
        users.on('reset', this.render);
        users.fetch({
            success: function (usersResp) {
                users.reset(usersResp);
            }
        })
    },
    el: '.page',
    events:{
      'click th':'headerClickHandler'
    },
    headerClickHandler: function(){
       //figure out key to be sorted on;
       this.users.sort_key = key_figured_out_from_th_clicked;
       this.render(); 
    },

    render: function () {
        var users = this.users;
        var template = _.template($('#user-list-template').html(), { users: users.models });
        that.$el.html(template);
        var that = this;

    }
});

按下按钮backboneJS在模板表中排序集合

1 个答案: