Asp.net mvc 4 包含knockoutjs、requirejs和mvc4的Jquery数据表

Asp.net mvc 4 包含knockoutjs、requirejs和mvc4的Jquery数据表,asp.net-mvc-4,knockout.js,requirejs,Asp.net Mvc 4,Knockout.js,Requirejs,我正在使用Knockoutjs、requirejs和mvc4构建一个web应用程序 要在数据表中显示的公司列表 我的Common.js如下所示: require.config({ baseUrl: "/Scripts/", paths: { "jquery": "jquery-1.8.2", "jqueryui": "jquery-ui-1.8.24", "jqdatatable": "jquery.dataTables",

我正在使用Knockoutjs、requirejs和mvc4构建一个web应用程序 要在数据表中显示的公司列表 我的Common.js如下所示:

require.config({
    baseUrl: "/Scripts/",
    paths: {
        "jquery": "jquery-1.8.2",
        "jqueryui": "jquery-ui-1.8.24",
        "jqdatatable": "jquery.dataTables",
        "bootstrapdatatable": "dataTables.bootstrap",
        "KO": "knockout-2.2.0"
    },
    shim: {
        "jqdatatable": "jquery.dataTables",
        "bootstrapdatatable": "dataTables.bootstrap"
    }
});
define(["jquery", "jqdatatable", "bootstrapdatatable","KO"], function ($,ko) {
    $(document).ready(function () {
        var urlPath = window.location.pathname; 
        ko.applyBindings(CompanyListVM);
        CompanyListVM.getComapanies();

        var CompanyListVM = {
            Company: ko.observableArray([]),
            getComapanies: function () {

                $.ajax({
                    type: "GET",
                    url: '/Company/FetchCompanies',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        self.Company(data);
                        ShowGrid();
                    },
                    error: function (err) {
                        alert(err.status + " : " + err.statusText);
                    }
                });
            },
        };



    }





    );
}



);


function ShowGrid() {

    (function ($) {
        $("#liCompanyList").addClass("active");
        $("#liHome").removeClass("active");
        $("#liUserManagement").removeClass("active");
        $("#liReport").removeClass("active");
        $('#example').dataTable();
    }(jQuery));


}



//Model
function Company(data) {

    this.CompName = ko.observable(data.CompName);
    this.CompLanguage = ko.observable(data.CompLanguage);
    this.CompEmail1 = ko.observable(data.CompEmail1);
    this.CreatedBy = ko.observable(dat.CreatedBy);
}
My CompanyGrid.js如下所示:

require.config({
    baseUrl: "/Scripts/",
    paths: {
        "jquery": "jquery-1.8.2",
        "jqueryui": "jquery-ui-1.8.24",
        "jqdatatable": "jquery.dataTables",
        "bootstrapdatatable": "dataTables.bootstrap",
        "KO": "knockout-2.2.0"
    },
    shim: {
        "jqdatatable": "jquery.dataTables",
        "bootstrapdatatable": "dataTables.bootstrap"
    }
});
define(["jquery", "jqdatatable", "bootstrapdatatable","KO"], function ($,ko) {
    $(document).ready(function () {
        var urlPath = window.location.pathname; 
        ko.applyBindings(CompanyListVM);
        CompanyListVM.getComapanies();

        var CompanyListVM = {
            Company: ko.observableArray([]),
            getComapanies: function () {

                $.ajax({
                    type: "GET",
                    url: '/Company/FetchCompanies',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        self.Company(data);
                        ShowGrid();
                    },
                    error: function (err) {
                        alert(err.status + " : " + err.statusText);
                    }
                });
            },
        };



    }





    );
}



);


function ShowGrid() {

    (function ($) {
        $("#liCompanyList").addClass("active");
        $("#liHome").removeClass("active");
        $("#liUserManagement").removeClass("active");
        $("#liReport").removeClass("active");
        $('#example').dataTable();
    }(jQuery));


}



//Model
function Company(data) {

    this.CompName = ko.observable(data.CompName);
    this.CompLanguage = ko.observable(data.CompLanguage);
    this.CompEmail1 = ko.observable(data.CompEmail1);
    this.CreatedBy = ko.observable(dat.CreatedBy);
}
这是显示公司列表。但我想显示另一个显示用户列表的网格。我已经使用必要的更改编写了相同的函数。代码是为Usergrid.js提供的

define(["jquery", "jqdatatable", "bootstrapdatatable", "KO"], function ($, ko) {
    $(document).ready(function () {


        ko.applyBindings(person);
        ko.applyBindings(UserListVM);
        UserListVM.getUsers();
        var urlPath = window.location.pathname;
        var UserListVM = {
            User: ko.observableArray([]),
            getUsers: function () {
                var self = this;
                $.ajax({
                    type: "GET",
                    url: '/UserManagement/FetchUsers',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {

                        self.User(data);
                        ShowGrid();
                    },
                    error: function (err) {
                        alert(err.status + " : " + err.statusText);
                    }
                });
            },
        };



    }





    );






}



);


function ShowUserGrid() {

    (function ($) {
        $("#liCompanyList").addClass("active");
        $("#liHome").removeClass("active");
        $("#liUserManagement").removeClass("active");
        $("#liReport").removeClass("active");
        $('#tblUserList').dataTable();
    }(jQuery));


}



//Model
function User(data) {

    this.Usr_Id = ko.observable(data.Usr_Id);
    this.Usr_Name = ko.observable(data.Usr_Name);
    this.Usr_Email = ko.observable(data.Usr_Email);

}
但这一次用户网格不会出现。显示以下错误类型的webconsole错误:ko未定义


请帮助我,我对knockout.js非常陌生。

您使用的是require.js,您的参数不匹配

define(["jquery", "jqdatatable", "bootstrapdatatable", "KO"], function ($, ko) {
jquery正在加载到$


jqdatatable正在加载到ko中,

谢谢。但我怀疑它在companygrid中是否能完美运行。它只在usergrid中显示错误。请帮我澄清我的疑问