2014-02-17 57 views
0
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獲取數據的代碼。Backbonejs:從集合中獲取點擊模型

following manageUsers.tpl file。

<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> 

和取數據成功地我已經填寫表collectios的數據和表項的點擊我要以檢索整個model.I在同一TPL文件格式和表

怎麼辦使用backbonejs和下劃線js?

+0

請通過'Backbone.js'的文檔,我認爲http://backbonejs.org/#Collection-fetch鏈接將回答你有關如何調用讀取coll的問題ection – muneebShabbir

+0

我已經經歷了它,我在獲取調用成功時得到了迴應,但問題是我不知道如何使用此集合填充表以及點擊表中的項目如何獲得點擊模型? – asdfdefsad

+0

你必須建立一個視圖,並將集合傳遞給該視圖,然後在你收集的基礎上填充該視圖 – muneebShabbir

回答

1

首先,這個事件添加到您的視圖:

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

不是改變ID來id='"+d.username+"'沒有edit_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]; 
    ... 
} 
+0

好的,我已更正它,然後點擊項目如何獲得整個模型? – asdfdefsad

+1

一旦你有了'username',你就可以搜索你的收藏集:usersCollection.where({name:username});我不確定您是否在模型中使用了名稱或用戶名。 –

+0

得到d模式,但它是在0來臨,R _changing:假 _events:對象 _pending:假 _previousAttributes:對象 屬性:改變對象 :對象 CID: 「C2」 收集,R __proto__:■ 構造:功能(){返回i.apply(此,自變量)} 默認:對象 __proto__:對象 長度:1個 __proto__:數組[0]這種格式如何獲得的用戶名和idAdmin密碼出來的嗎? – asdfdefsad