Search code examples
javascriptjquerybackbone.js

creating an event in the row of a backbone table

I'm creating a backbone view that can draw a table with rows and columns (tr, td). 

 var bodyTable =' <table id="board" style="width: 80%" width="400" height="400px"; ="" border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"><tbody>
    <tr align= "center" data-row-id= "0" ><td bgcolor= "#ffffffff" > "X</td" ><td bgcolor= "#ffffff"= "#ffffff"= "#ffffff"= "#</td" ><td bgcolor= "#ffffffff" >X</td><><td bgcolor= "#ffffffffffffffff" >X</td>>><= ".

    <tr align= "center" data-row-id= "1" ><td bgcolor= "#ffffffff" >X</td><td bgcolor= "#ffffff"= "#ffffff"= "#ffffff"= "#ffffff"= "#td bgcolor=" #ffffffffff "><td

    <tr align="center" data-row-id="2"><td bgcolor="#ffffffff">X</td><td bgcolor="#ffffff"="#ffffff"="#ffffff"="#ffffff"="#td bgcolor="#ffffffffff">X</td><><td bgcolor="#ffffffffffffffff">X</td>>><><=".
</tbody></table>';

In addition I want to launch an event by clicking on a row of the table, and that in the function ("click tr":"insertaFicha") insertaFicha me of the row on which it has been clicked.

var TableroView = Backbone.View.extend({
    el : '#tablero',
    //instanciamos colecciones que necesitaremos acceder de la vista
    collection: {
        colores: coloresCollection,
        jugadores: jugadoresCollection
    },
    events: {
        "click tr": "insertaFicha"
    },
    initialize: function() {

        this.render();

    },
    //instanciamos el modelo de la vista
    //model : tableroModelo,
    render: function(){
         console.log("render");



        var bodyTablero = '<table id="tablero" style="width:80%" width="400" height="400px" ;="" border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"><tbody>
            <tr align="center" data-row-id="0"><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td></tr>

            <tr align="center" data-row-id="1"><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td></tr>

            <tr align="center" data-row-id="2"><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td><td bgcolor="#ffffff">X</td></tr>
        </tbody></table>';


        this.$el.html(bodyTablero);

    },
    insertaFicha: function() {
         console.log("insertaFicha");
         //aquí voy a insertar fichas en el arraytablero
         //introducir en el tableroArray FichaModel's.

            console.log( "row-id", $(event.target).attr('data-row-id'));
    }
});

1) When clicking on a row of the table that draws the view, it arrives at the insertaFicha function.

2) In the chrome $ debugger (event. target) it returns an object but there is no access to the "data-row-id" attribute returns undefined.

Solution

  • There are three little things I'd clean up, and see if it solves your problem.

    1. For data-blah properties, I've found that varying the case of the property (ex data-rowId vs data-rowid sometimes made a property unretrievable. I would avoid the dash and use data-rowid rather than data-row-id.

    2. Explicitly name your event input. Instead of insertaFicha: function() use insertaFicha: function(event).

    3. Jquery has a method just for extracting data-attributes. You can try $(event.target).data('rowid') instead of $(event.target).attr('data-rowid').