0

忍者。

我想知道两件事。

  1. 如何调用函数“Initialize()”和“FillValidateView()”。我在下面的代码中写了我想调用这些函数的地方。

  2. 我是 JavaScript 编程的新手。我想知道以下代码是否适合实现页面转换。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="header">
        <p></p>
    </div>

    <div id="main">
        <div id="validate_or_import">
            <input type="button" id="go_validate" value="Validate Data">
            <inp ut type="button" id="go_import" value="Import Data">
        </div>
    </div>

</body>
</html>

JavaScript

$(function () {

    var View = function () {
        this.title = ''
    };

    View.prototype = {
        Initialize: function () {
            this.title = '';
            this.tiles = [];
            $('#main').children().hide();
        },
        Render: function () {
            $('#header p').html(this.title);
            jQuery.each(this.tiles, function () {
                this.show();
            });
        },
        FillFirstView: function () {
            this.title = 'Select what you want';
            this.tiles.push($('#validate_or_import'));
            $('#go_validate').on('click', function () {
                // I want to call 'Initialize()' and 'FillValidateView()' here!!!!!
            });
            $('#go_import').on('click', function () {
                alert('Not implemented yet');
            });
        },
        FillValidateView: function () {
            this.title = 'Validate data';
            //I will write more about this view
        }
    };

    var view = new View();
    view.Initialize();
    view.FillFirstView();
    view.Render();

});
4

2 回答 2

3

(1) 这有点棘手，因为 的值this不会是回调中的原始对象。你可以这样做：

var that = this;
$('#go_validate').on('click', function () {  
  that.Initialize();  
});

或者：

$('#go_validate').on('click', (function() {
  this.Initialize();
}).bind(this));

关键字中的更多信息this：“this”关键字如何工作？

于 2013-08-09T09:52:19.647 回答
1

其他答案显示了如何this手动捕获，但 jQuery 为此提供了专用工具：$.proxy. 这是如何在您的示例中使用它（为清楚起见而减少）：

$(function () {

    var View = function () {
    };

    View.prototype = {
        Initialize: function () {
            console.log('hi')
        },
        FillFirstView: function () {
            $('body').on('click', $.proxy(function () {
                this.Initialize()
            }, this));
        }
    };

    var view = new View();
    view.FillFirstView();

});
于 2013-08-09T09:59:48.820 回答