分類收集模板表上按下按鈕backboneJS

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的完全noob。基本上按下一個按鈕，我想按照該類型進行渲染。我假設我需要某種點擊事件來處理。有人能指引我朝着正確的方向嗎？

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; 

    } 
});