Question

嗨我试图在视图初始化函数中进行一些dom修改后触发视图事件

编辑：对不起我的问题，目前尚不清楚。这是一个完整的代码示例。最后，我发现我在添加课程之前触发了更改事件..感觉如此愚蠢，但我挣扎了好几个小时！感谢您的支持！

    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script src="http://underscorejs.org/underscore.js"></script>
    <script src="http://backbonejs.org/backbone.js"></script>
    <script type="text/javascript">
    var App = {};

    (function($) {

        App.FormView = Backbone.View.extend({
                events: {
                    "change .autofill" : "autofill"
                },

                initialize : function() {
                    _.bindAll(this, "autofill");

                    this.formelements = {"input" : {"autofill" : true}};

                    for(var elementId in this.formelements){
                        if(this.formelements[elementId].autofill){
                            var $el = $("#"+elementId);
                            //$el.trigger("change").addClass("autofill")//does not work trigger before class added :-(
                            $el.addClass("autofill").trigger("change");
                        }
                    }
                },

                autofill : function(e){
                    console.log("ok");
                }
        });     

        App.init = function(containerId){
            new App.FormView({el : "#"+containerId});
        }
    })(jQuery);
    </script>


    <div id="container">
        <input type="checkbox" id="input" />
    </div>
    <script type="text/javascript">
        App.init("container");
    </script>

Answer 1

您正尝试在尚未包含在DOM中的元素上触发事件。这不起作用，你必须在视图渲染后触发你的事件。

我不确切知道你如何渲染，但考虑this

var View = Backbone.View.extend({

  events: {
    'change input': 'autofill'
  },

  render: function() {
    this.$el.html('<input>');
    this.$('input').trigger('change');
  },

  autofill: function(e) {
    console.log('ohai thar');
  }

});

var view = new View({
  el: $('#root')
});
view.render();

当在添加到文档的元素上触发事件时，它会被拾取。

骨干，触发视图事件

1 个答案: