Свойства события Backbone Click - PullRequest
Новая
       12

Свойства события Backbone Click

0 голосов
/ 17 февраля 2012

Я использовал событие backbone.js 'click' здесь. Событие onClick, я хочу выбрать элемент HTML, по которому щелкнули, удалить его и добавить в список добавленных.

Я не могу получить доступ ко всем элементам HTML dom, на которых я нажал. После получения элемента HTML.

Если я нажму «Китай», приведенный ниже код выдаст предупреждение «<li>China</li>».

Итак, как мне получить доступ ко всем свойствам dom?

Код 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();

и HTML-код, как показано ниже: 

    <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>

Существует два контейнера ul, добавленные и добавленные. Если я щелкну элемент из источника, он должен быть перемещен в целевой контейнер.

Ответы [ 2 ]

6 голосов
/ 17 февраля 2012

Вы просто хотите использовать appendTo - это удалит его и поместит в ваш #added UL 

$(ev.target).appendTo('#added');
0 голосов
/ 17 февраля 2012

Я попытался запустить его самостоятельно с Backbone 0.9.1, и все работало нормально. Убедитесь, что вы включаете 

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

после ваш HTML отображается. В противном случае вы указываете $("#container") до того, как оно действительно существует в DOM. Если вы сделаете это, jQuery ничего не вернет, поэтому установив el в пустой массив, так что ваши события будут ни к чему не привязаны ... Поэтому они никогда не будут вызваны.

Вот jsFiddle, с которым он работает: http://jsfiddle.net/8jyeb/1/. Обратите внимание, что вам нужно обернуть весь JavaScript в обработчик JQuery DOM Ready. Это гарантирует, что код не будет запущен, пока HTML не загрузится.

...