Backbone Fare clic su Proprietà per eventi

Question

Ho usato 'click' backbone.js evento qui. onclick evento, voglio selezionare l'elemento HTML clic, toglierlo e aggiungere in elenco aggiunto.

Io non sono in grado di accedere a tutti gli elementi HTML DOM dove ho cliccato. Dopo aver ottenuto elemento HTML.

Se scatto 'la Cina', il seguito di codice sarebbe avvisare '<li>China</li>'.

Quindi, Come faccio ad accedere tutte le proprietà DOM?

codice Java Script:

var ActionBox = Backbone.View.extend({
        el:$("#container"),
        events: {
                    "click #add li": "addItem",
                    "click #alert": "alertHere"
        },
        initialize: function(){     
                _.bindAll(this,"addItem","render");             
                this.render();  
        },
        render:function(){  
                this.prepareActions();          
        },
        addItem:function(ev){
                var ac=$(ev.target).html(); // it doesn't give me "<li>US</li>" after clicking US
                alert(ac);
                },
        prepareActions:function(){          
                    var str="";
                    for(var i=0;i<actions.length;i++)   str+="<li>"+actions[i]+"</li>";                         
                    $("#add ul").append(str);
        }       
    });    
var actionBox = new ActionBox();

e il codice HTML, come di seguito:

    <div id="container">
    <table>
    <tr>
        <td>
            <div id="add">      
                <ul>
                 <li>US</li>
                 <li>China</li>
                 <li>UK</li>
                </ul>
            </div>
        </td>
        <td>
            <div id="controls">

            </div>
        </td>
        <td>
            <div id="added">        
                <ul></ul>
            </div>
        </td>
    </tr>
    </table>        
</div>

Ci sono due contenitori ul, aggiungere e ha aggiunto, Se scatto l'elemento dalla fonte, dovrebbe essere spostato in contenitore di destinazione.

Answer 1

Si vuole solo utilizzare appendTo - questo rimuoverlo e metterlo nel vostro #added UL

$(ev.target).appendTo('#added');

Answer 2

Ho provato a fare funzionare io stesso con Backbone 0.9.1, e tutto ha funzionato bene. Assicurati di essere inclusi

var ActionBox = Backbone.View.extend({
    el:$("#container"),
    ...      
});

dopo il codice HTML viene reso. In caso contrario, si sta specificando $("#container") prima che esiste realmente nel DOM. Se lo fai, jQuery tornerà nulla impostando quindi el ad una matrice vuota, in modo che le manifestazioni sono saranno vincolati a nulla ... quindi non avevano mai essere chiamato.

Ecco un jsFiddle con tale organizzazione: http://jsfiddle.net/8jyeb/1/. Si noti che si deve avvolgere tutto il JavaScript in un gestore di jQuery DOM pronto. Questo garantisce che il codice non viene eseguito fino a quando il codice HTML è stato caricato.