代码之家 › 专栏 › 技术社区 › user1358518

在主干表的行中创建事件

backbone.js jquery javascript

user1358518 · 技术社区 · 7 年前

我正在创建一个主干视图,可以绘制一个包含行和列(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>';

此外,我想通过单击表中的一行来启动一个事件,并在函数(“click tr”:“insertaFicha”)中插入已被单击的行的imertaficha 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) 单击绘制视图的表中的一行时,它将到达insertaFicha函数。

2) 在chrome$debugger(event.target)中,它返回一个对象,但无法访问“data row id”属性,返回未定义的结果。

1 回复 | 直到 7 年前

arbuthnott 7 年前

我会清理三件小事,看看是否能解决你的问题。

对于 data-blah data-rowId vs data-rowid 数据行ID 而不是 data-row-id .
insertaFicha: function() 使用 insertaFicha: function(event) .
$(event.target).data('rowid') $(event.target).attr('data-rowid') .