2

クライアントのスキルを磨くために 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)
    }
}) ;

「ログ ポイント 1」で、有効な関数がログに記録されます。

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

「ログ ポイント 2」で、「未定義」がログに記録されます。私はこれを試しました

var $that = this

これをループで渡します。これはどれも機能していません (しゃれは意図されていません)。アプリケーションの設計を進化させる必要があることは認識していますが、このコンテキストでこの問題を理解しようとしています。NavigationView クラスの navigateTo メソッドへの有効なプロキシを作成できないのはなぜですか?

コードを機能させるための答えに加えて、その理由を知りたいです。ループ内では、このオブジェクトは別のコンテキストであると思われます。しかし、そのコンテキストを事前に保存して機能させることができないのはなぜですか?

4

1 に答える 1

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);
        }
    })
于 2013-07-10T13:34:03.357 に答える