在 backbone table 的行中创建事件

Question

我正在创建一个 backbone 视图，它可以绘制一个 table 的行和列 (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>';

此外，我想通过单击 table 的一行来启动一个事件，并且在函数 ("click tr":"insertaFicha") insertaFicha me 上它已被点击。

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) 当点击绘制视图的table的一行时，到达insertaFicha函数

2) 在 chrome $ 调试器 (event.target) 中它 returns 一个对象但是无法访问 "data-row-id" 属性 returns undefined.

Answer 1

我要清理三件小事，看看它是否能解决您的问题。

对于 data-blah 属性，我发现改变属性的大小写（例如 data-rowId 与 data-rowid 有时会产生属性无法检索。我会避免破折号并使用 data-rowid 而不是 data-row-id.
明确命名您的事件输入。而不是 insertaFicha: function() 使用 insertaFicha: function(event).
Jquery 有一种方法只用于提取数据属性。您可以尝试 $(event.target).data('rowid') 而不是 $(event.target).attr('data-rowid').

在 backbone table 的行中创建事件

creating an event in the row of a backbone table

javascript

jquery

backbone.js