带有knockoutjs,requirejs和mvc4的Jquery数据表

时间:2015-02-24 13:53:22

标签: 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",
        "bootstrapdatatable": "dataTables.bootstrap",
        "KO": "knockout-2.2.0"
    },
    shim: {
        "jqdatatable": "jquery.dataTables",
        "bootstrapdatatable": "dataTables.bootstrap"
    }
});

我的CompanyGrid.js如下:

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 " TypeError:ko未定义"

请帮帮我,我是knockout.js的新手。

1 个答案:

答案 0 :(得分:0)

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

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

jquery正在加载到$

jqdatatable正在加载到ko