使用模块化javascript创建模型时未定义

Question

这是我的代码。我正在尝试学习javascript模块化模式并使用它实现mvc。我是javascript中的abeginner。我有一个带有字段的表单，我想写入登录按钮单击。当我这样做时，我总是得到模型未定义。我在哪里弄错了。请提前帮助和感谢

   var SPModel = {
        caseModel : {
            caseno : $('#txtCaseNo').val(),
            caseSubmittedBy : $('#txtCaseUserName').val(),
            caseEmail : $('#txtCaseUserEmail').val(),
            caseMessage : $('#txtCaseMessage').val()
        }
    };

    var SPView = {
        AddCaseDetailsView : function (model) {

            console.log('Set view using model data');
            console.log(model.caseno);
            console.log(model);

        }
    };

    var SPController = {

        AddCaseDetails : function () {
            console.log(' Controller Calling Model');
            SPView.AddCaseDetailsView(SPModel.caseModel);
        }

    };

    var BindEvents = function () {
        $("#btnSubmitMessage").click(SPController.AddCaseDetails);
    };

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