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/

如何在骨干js中循环调用视图事件

1 个答案: