Question

我创建了一个可以绘制包含行和列（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>';

此外，我想通过单击表格的一行来启动一个事件，然后在函数中（＆＃34;单击tr＆＃34;：＆＃34; insertaFicha＆＃34;）插入该行的一个事件点击它。

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）中，它返回一个对象但是没有访问＆＃34; data-row-id＆＃34;属性返回undefined。

Answer 1

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

对于data-blah属性，我发现改变属性的情况（ex data-rowId vs data-rowid有时会使属性无法恢复。我会避免破折号和使用data-rowid而不是data-row-id。
明确命名您的事件输入。而不是insertaFicha: function()使用insertaFicha: function(event)。
Jquery有一个仅用于提取数据属性的方法。您可以尝试使用$(event.target).data('rowid')代替$(event.target).attr('data-rowid')。

在骨干表的行中创建一个事件

1 个答案: