0

誰かが私を助けることができれば、私はクロージャーに問題があり、jqueryを使用してidによって選択された要素であると宣言されたプライベート変数を取得しています。私は次のようなモジュールを持っています:

var package = package || {};

(function() {
        if(!package.slider)
                package.slider = {};

        function Slider() {
        }

        // --------- /Public Members --------- //
        Slider.prototype = {
            init: function(){
                _setEvents();
            }
        };

        // --------- Public Members --------- //


        // --------- Private Members --------- //
        var shoePreview = $('#shoe-preview');  /*somehow this variable does NOT get recognised even though I have it in the DOM.*/

        function _setEvents(){
            $.subscribe('getAllPerspectives', function(event){ _getAllPerspectives() });
            $.subscribe('showPreview', _show);
            $.subscribe('hidePreview', _hide);
        }

        function _getAllPerspectives(){
            _getAngleShoeImage(helper.getCurrentAngle());
            $.each(constants.angles, function(key, val){
                if(val != helper.getCurrentAngle()){
                    _getAngleShoeImage(val);
                }
            });
        }

        function _getAngleShoeImage(angle){
            var shoeImage = shoePreview;
            shoeImage.html('<p>Hello World</p>');

        }


        var that = new Slider();
        package.slider = that;

    })();
$(document).ready(function(){

    $.each(package, function (key, val){
        val.init();
    });
});

コードを調べてみると、shoePreview という変数があり、モジュールの外部からはアクセスできないと思います。

後でコードのどこかで、_getAngleShoeImage をトリガーするいくつかのメソッドを呼び出します。ここで、shoeImage という名前の変数をプライベートの shoePreview 変数に設定します。

問題は、jquery の html() 呼び出しを使用しようとすると、shoePreview 変数が何であるかを認識しないように見えることです。

var shoeImage = $('#shoe-preview') を代入してこれをテストし、目的のマークアップで html() を呼び出したところ、正常に動作しました。

この問題は非常に小さいですが、それは私を夢中にさせています。私は var shoePreview = $('#shoe-preview'); を書いていますか? 間違った方法で、またはそれ以上の何かがあります。どんな助けでも大歓迎です。

ありがとう。

4

1 に答える 1

1

ここに 1 つだけ問題があります: (function(){hackhackhack()})()文字通り意味 -クロージャを実行します。これは、DOM の準備が整う前に DOM にアクセスしようとしたことを意味します。main関数ではなく、initの後に var を設定する必要があるだけです。

var package = package || {};

(function() {
    if(!package.slider)
            package.slider = {};

    function Slider() {
    }

    // --------- /Public Members --------- //
    Slider.prototype = {
        init: function(){
            //New function here
            _setVars();
            _setEvents();
        }
    };

    // --------- Public Members --------- //


    // --------- Private Members --------- //
    //make it accessible for other proto functions;
    var shoePreview;

    function _setVars() {
       shoePreview=$('#shoe-preview'); // now it will be set when init() run not when object proto initialised
    }
    function _setEvents(){
        $.subscribe('getAllPerspectives', function(event){ _getAllPerspectives() });
        $.subscribe('showPreview', _show);
        $.subscribe('hidePreview', _hide);
    }

    function _getAllPerspectives(){
        _getAngleShoeImage(helper.getCurrentAngle());
        $.each(constants.angles, function(key, val){
            if(val != helper.getCurrentAngle()){
                _getAngleShoeImage(val);
            }
        });
    }

    function _getAngleShoeImage(angle){
        var shoeImage = shoePreview;
        shoeImage.html('<p>Hello World</p>');

    }


    var that = new Slider();
    package.slider = that;

})();
$(document).ready(function(){

    $.each(package, function (key, val){
        val.init();
    });
});
于 2012-11-18T03:26:24.937 に答える