0

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.

user1358518
  • 93
  • 2
  • 13
  • To render a list, you should create a view type for each element (here rows) and a view for the list itself which only handle rendering the item views. Here's a [todo list example code](http://backbonejs.org/docs/todos.html) and [how to efficiently render a list with Backbone](https://stackoverflow.com/a/44034868/1218980). – Emile Bergeron Sep 13 '17 at 14:01

1 Answers1

0

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').

arbuthnott
  • 3,819
  • 2
  • 8
  • 21
  • thank you very much, it works like this: insertaFicha: function (event) {) console. log ("insertFicha"); console. log ("row-id", $ (event. currentTarget). attr (' datarowid'); - console. log ("row-id", $ (event. currentTarget). attr (' datarowid')) } – user1358518 Sep 13 '17 at 09:26
  • 2
    It's explained in the [`.data()` jQuery function doc](https://api.jquery.com/data/) how `data-row-id` gets transformed to `rowId`. It's the [Dataset API Specification](https://www.w3.org/TR/html5/dom.html#dom-dataset) that mentions it should do this. – Emile Bergeron Sep 13 '17 at 14:06