Question

我正在学习Backbone.js和jQuery，以努力提升我的客户技能。我在渲染一个视图时遇到了障碍，我无法将平均值附加到子元素上，同时在每个函数/循环中迭代它们。这是渲染函数的相关部分

var NavigationView = Backbone.View.extend({

    el: $('#nav-navigation')
    , firstRender: true
    , template: _.template($('#tpl-nav-organization').html())

    , initialize: function(){

        _.bindAll(this, 'render'); 
        this.collection.on('add', this.render);     
    }

    , render: function(){


        var $that = $(this);
        var proxy = $.proxy(this.navigateTo, this, 'parameter to navigateTo')

          // log point 1   
          console.log(proxy)

        $.each(this.el.children, function(index, child) {

            var navId = $(child).attr('id')
            if(navId !== undefined) {
                var navSelector = '#' + navId

                var proxy = $.proxy(this.navigateTo, $that, 'parameter to navigateTo')

                          // log point 2
                  console.log(proxy)

                $(navSelector).on('click',proxy);
            }
        })              


    }
    , navigateTo: function(id) {
        console.log(id)
    }
}) ;

在“log point 1”处我记录了一个有效的函数：

function () {
            return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
        }

在“log point 2”处，我记录了“未定义”。我试过这个

var $that = this

并在循环中传递此内容。这些都不起作用（没有双关语意）。我意识到我的应用程序设计需要进化，但我试图在这种情况下理解这个问题。为什么无法为NavigationView类的navigateTo方法创建有效的代理？

除了使代码有效的答案之外 - 我很想知道原因。我怀疑在循环内部，这个对象是一个不同的上下文。但为什么我不能事先存储那个上下文并让它工作呢？

Answer 1

这是因为在$ .each循环中this指向数组当前索引的值，而不是指向它所指向的对象

var self = this;
$.each(this.el.children, function(index, child) {

        var navId = $(child).attr('id')
        if(navId !== undefined) {
            var navSelector = '#' + navId

            var proxy = $.proxy(self .navigateTo, $that, 'parameter to navigateTo')

                      // log point 2
              console.log(proxy)

            $(navSelector).on('click',proxy);
        }
    })

在每个循环中将事件附加到jQuery中的元素

1 个答案: