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

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

   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();
    });