백본 : 모음집에서 클릭하면 모델을 얻을 수 있습니다.

Question

define(['jquery', 'underscore', 'backbone', 'text!views/manageUsers.tpl', 'common'], function($, _, Backbone, tmpl_manageUsersView, ajax) { 

/* 
* Module list 
* 
* tmpl_page1View  templates/tmpl_page1View.html 
*/ 

var manageUsersView = Backbone.View.extend({ 
    // Setting the view's template property using the Underscore template method   
    template: _.template(tmpl_manageUsersView), 
    // View constructor 
    initialize: function() { 
     self = this; 
    }, 
    // View Event Handlers 
    events: { 

    }, 
    // Renders the view's template to the UI 
    render: function() { 
     this.$el.html(this.template({data: this.templateData})); 
     user=Backbone.Model.extend({ 
      defaults:{ 
       name:"", 
       password:"", 
       isAdmin:false 
      }, 

     }); 
     users=Backbone.Collection.extend({ 
      model:user, 
      url:"auth" 
     }); 

     usersCollection=new users(); 
     usersCollection.fetch({ 
      error:function(response,xhr){ 
       console.log(response); 
      }, 
      success:function(response){ 
         count=1; 
       _.each(data,function(d){ 
        if(count%2==0) 
         $("#users>tbody").append("<tr class='odd'><td>"+count+"</td><td>"+d.username+"</td><td><a href='#' class='edit-iocn' id='edit_"+d.username+"' ></a><a class='ancrul delete-icon' id='delete_"+d.username+"'></a></td>"); 
        else 
         $("#users>tbody").append("<tr class='even'><td>"+count+"</td><td>"+d.username+"</td><td><a href='#' class='edit-iocn' id='edit_"+d.username+"'></a><a class='ancrul delete-icon' id='delete_"+d.username+"'></a></td>"); 
        count++; 
       }); 
       /*--*/ 

       var oTable = $('#users').dataTable({ 
        "sDom": '<"bottom"<i>rtp<"clear">', 
        //"sDom":'<"top"ip>rt<"bottom"ip<"clear">', 

        "sPaginationType": "full_numbers", 
        "bLengthChange": true, 
        "bPaginate": true, 
        "bInfo": true, 
        //"bAutoWidth": true, 
        "iDisplayLength":5, 
        "oLanguage": { 
         "sInfo": "", 
         "sInfoEmpty": "" 
        }, 
        }); 

      } 
     }); 

}); 
return manageUsersView; 
}); 

위의 내용은 URL에서 데이터를 가져 오는 코드입니다.

다음 manageUsers.tpl 파일.

<div class="content"> 
<p> </p> 
<h3></h3> 
<div class="admin-login-area ui-corner-all"> 
    <p class="validateTips">All form fields are required.</p> 
    <form id="addUserForm"> 
     <fieldset> 
     <label for="name" class="login-label">User Name</label> 
     <input type="text" name="u-name" id="u-name" class="text ui-widget-content ui-corner-all"> 
     <label for="name" class="login-label">Password</label> 
     <input type="password" name="p-name" id="p-name" class="text ui-widget-content ui-corner-all"> 
     <label for="email" class="login-label">Retype Password</label> 
     <input type="password" class="text ui-widget-content ui-corner-all" id="c-name" name="c-name"> 
     <input type="checkbox" id="isAdmin" /> 
     <label>Is Admin</label> 
     <label class="login-label"></label> 
     <br/> 
     <input type="button" name="submit" id="submit" value="Submit" class="submit-btn"> 
     <input type="button" name="submit" id="reset" value="Reset" class="submit-btn"> 
     <input type="button" name="submit" id="cancel" value="Cancel" class="submit-btn"> 
     <label class="login-label"></label>   
     </fieldset> 
     </form> 

<!-- end admin login --></div> 
<div class="table" > 

    <table width="100%" cellspacing="0" cellpadding="0" border="0" id="users"> 
    <thead> 

      <th>Sr No</th> 
      <th>users</th> 
      <th>Actions</th> 

      </thead> 
      <tfoot style="display: table-header-group;"> 
       <tr> 
        <th></th> 
        <th></th> 
        <th></th> 

       </tr> 
      </tfoot> 
      <tbody> 

      </tbody> 
     </table> 

    </div> 

성공적으로 나는 전체 model.I PIN이 할 collectios의 데이터 테이블에서 항목의 클릭에 테이블을 채우고 가져 오는 데이터에 대한

는 같은 TPL 파일의 형태와 테이블이 어떻게 수행하는

backbonejs와 밑줄 js를 사용하는 것?

Answer 1

먼저보기에이 이벤트를 추가하십시오 edit_ 및 delete_

없이 id='"+d.username+"'에 ID를 변경하고 편집을 지속 및 방법 삭제보다

events : { 
    'click .edit-iocn' : 'edit', // in your code you typed `iocn` instead of `icon` 
    'click .delete-icon' : 'delete' 
} 

:

edit: function(event) { 
    var username = event.currentTarget.id; 

    var user = usersCollection.where({name: username})[0]; 
    ... 
} 

delete: function(event) { 
    var username = event.currentTarget.id; 

    var user = usersCollection.where({name: username})[0]; 
    ... 
}