Backbonejs: get clicked model from collection

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;
});

Above is my code for getting data from url.

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>

and on fetching data successfully i have filled table with collectios's data and on click of an item in table i want to retrive whole model.I have form and table in same tpl file

How to do that using backbonejs and underscore js?

Answer 1

First, add this event to your view :

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

Than change the ids to id='"+d.username+"' without the edit_ and delete_

And last the edit and delete methods :

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];
    ...
}