如何在循環中調用視圖事件js

Question

我想在動態創建的拖放框上觸發on_change事件。 ，但不知道如何做到這一點的骨幹JS

here is my html code creating a div tag 

<div id="page"> 
    <input type="button"id="btn1"value="ok"> 
</div> 

和我的骨幹代碼我在哪裏動態地

var btn2id =""; 
    var app = {};app.v1 = Backbone.View.extend({ 
    el: '#page',  
    events: { 
     'click #btn1' : 'f1', 
    }, 
f1:function() 
    { 
     alert("Boom"); 
     btn2id="btn2"; 
for(var j=0;j<3;j++) { 
     $('#page').append('<select id="selecty'+j+'"></select>'); 
     for(var i=0;i<10;i++){ 
     $('#selecty'+j+'').append('<option value="'+i+'">'+i+'</option>'); 
     } 
vv = new app.v2();}} 
    } 
    }); 
app.v2 =Backbone.View.extend({ 
    el: '#page',  
    events:{ 
    at this place i have no idea what to do 
    // for(int i=0;i<3;i++){ 
    // 'change '#selecty'+i+'' : 'f2', 
    // } 
    }, 

f2:function() { 
     alert("Boom again"); 
    } 
v = new app.v1(); 
    }); 
v = new app.v1(); 

Answer 1

添加下拉在我看來，可重用的組件應該有鑑於其。 這種做法可以讓您輕鬆地綁定重複事件，並且通常情況下會清理您的代碼。

注意：在我的代碼示例中，我沒有使用任何模板引擎或練習，但我完全建議您這樣做。

所以讓我們假設你有創建新select元素按鈕的主要觀點：

var View = Backbone.View.extend({ 
    el : "#main", 
    events : { 
     'click #add' : 'add', 
    }, 
    add : function(){ 
    var select = new SelectView(); 
    this.$el.append(select.render().el); 
    } 
}); 

正如你所看到的，隨時#add被點擊時，它會創建一個新的SelectView它代表select元素。

和選擇元素本身：

var SelectView = Backbone.View.extend({ 
    events:{ 
    'change select' : 'doSomething' 
    }, 
    doSomething: function(e){ 
    $(e.currentTarget).css('color','red'); 
    }, 
    render: function(){ 
    this.$el.html("<select />"); 
     for(var i=0;i<10;i++) 
    { 
     this.$el.find('select').append("<option value='"+i+"'>"+i+"</option>") 
    } 
    return this; 
    } 
}); 

在我的虛擬的例子，我只是改變了元素的顏色，當它被改變。你可以做任何事情。 因此，現在將事件綁定到選擇視圖非常容易。

一般來說，我會建議你，當你使用可重用組件時，你應該總是考慮一個讓事情變得有意義的做法。 這是實現這一目標的很多方法之一，但理解和實施起來非常簡單。

歡迎您看到「活」的例子：http://jsfiddle.net/akovjmpz/2/