Question

我一直在使用这两个教程，但很难将它们合并在一起以获得上传csv来填充表格。这很可能是我对视图模型缺乏了解。

以下是来自淘汰赛js网站的淘汰赛js可编辑表的教程：KnockoutJS: Editable Grid Table

这是上传我正在引用的csv的教程：

这是我一直在努力将csv上传到我的桌面的javascript代码。我一直得到“JavaScript运行时错误：无法获取未定义或空引用的属性'推送” - 我在评论中标记了问题点。如您所见，我遇到了视图模型的问题。

<script>
    var UserModel = function (users) {
        var self = this;
        self.users = ko.observableArray(users);

        self.addUser = function () {
            self.users.push({
                id: "",
                firstName: "",
                lastName: ""
            });
        };

        self.removeUser = function (user) {
            self.users.remove(user);
        };

        self.save = function (form) {

            sendData = ko.toJSON(self.users);


            $.ajax({
                url: '/Users/CreateMultiple',
                contentType: 'application/json',
                async: true,
                type: 'POST',
                dataType: 'json',
                data: sendData,
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("FAIL: " + errorThrown);
                },
                success: function (data, textStatus, jqXHR) {
                    console.log("SUCCESS");
                }
            });


        };
    };

    var viewModel = new UserModel([
        { id: "", firstName: "", lastName: "" }
    ]);
    ko.applyBindings(viewModel);

    // Activate jQuery Validation
    $("form").validate({ submitHandler: viewModel.save });


    /////
    /////Upload CSV 
    /////


    $('#lnkUpload').click(function () {
        var FileToRead = document.getElementById('UserFile');
        if (FileToRead.files.length > 0) {
            var reader = new FileReader();

            reader.onload = Load_CSVData;

            reader.readAsText(FileToRead.files.item(0));

        }
    });   

    function Load_CSVData(e) {


        CSVLines = e.target.result.split(/\r\n|\n/);
        $.each(CSVLines, function (i, item) {

            var element = item.split(",");
            var csvID = (element[0] == undefined) ? "" : element[0].trim();
            var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
            var csvLastName = (element[2] == undefined) ? "" : element[2].trim();



            UserModel.users.push(new UserModel()//here's my problem
                .id(csvID)
                .firstName(csvFirstName)
                .lastName(csvLastName)

            )
        });
    }  

</script>

Answer 1

I was able to identify the fully qualified for the observable array which in turn made it work:

function Load_CSVData(e) {
    CSVLines = e.target.result.split(/\r\n|\n/);
                $.each(CSVLines, function (i, item) {

                    var element = item.split(",");
                    var csvID = (element[0] == undefined) ? "" : element[0].trim();
                    var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
                    var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
        viewModel.users.push({
                                id: csvID,
                                firstName: csvFirstName,
                                lastName: csvLastName
                            });
}

上传csv到淘汰js表的难度（ASP MVC）

1 个答案: