javascript - UILayout的可变范围

我正在尝试：

$(document).ready( function() {

    var myLayout = $('#layoutContainer').layout({
        west__size:         450
    ,   east__size:         250
    });

    function toggleFullView() {
        myLayout.toggle('west');
    }

    $('#mapFooter').prepend('<a href="#" onClick="toggleFullView();" title="Toggle full view of map">Full View</a>');

}); // end document.ready

单击.prepend（）创建的链接时，我不断收到错误消息“未定义toggleFullView”。我已经尝试过各种混乱。如果我将来自toggleFullView函数的行放在onClick中，则会收到错误-“未定义myLayout”。

该怎么办？谢谢您的帮助。

最佳答案

这是因为toggleFullView存在于.ready()回调的范围内，而不是脚本的全局范围。

var MyModule = (function($) {
    // $ is now jQuery

    // This is only accessible from within MyModule
    var privateRyan = 'fubar';

    // Globally accessible with MyModule.toggleFullView
    this.toggleFullView = function() {
        myLayout.toggle('west');
    }

    $(document).ready( function() {
        // Do init stuff here
        var myLayout = $('#layoutContainer').layout({
                west__size:         450,
                east__size:         250});
        $('#mapFooter').prepend('<a href="#" onclick="MyModule.toggleFullView();" title="Toggle full view of map">Full View</a>');
    }); // end document.ready

})(jQuery); // () will execute this function immediately​​​​​​​​​​​​​​​​​​​​​​​​​​​

您还可以创建链接，然后使用onclick附加事件处理程序并提供回调。