knockout.js - ko.mapping.toJS 不适用于子可观察数组属性

Question

当我在子属性Tags（一个observableArray）上调用ko.mapping.toJS 时，生成的JS 对象被映射为[{}, {}, {}]；关于为什么子属性的属性没有被映射的任何想法？

// Question
sv.QuestionService = function () {
    var _saveQuestion = function (question, callback) {
        var tags = [
            {
                Id: 1,
                Name: "food"
            },
            {
                Id: 2,
                Name: "career"
            },
            {
                Id: 3,
                Name: "fax"
            }
        ];

        $.each(tags, function (index, item) {
            question.Tags.push({ Id: 1, Name: "food" });
        });

        console.log(question.Tags());

        $.ajax("/Interview/saveQuestion", {
            data: ko.mapping.toJSON(question),
            dataType: "json",
            type: "post",
            contentType: "application/json",
            success: callback
        });
    };


    return {
        saveQuestion: _saveQuestion
    };
}();

// Question view model
sv.QuestionViewModel = function (data) {
    var self = this;
    if (!data.QuestionType) {
        data.QuestionType = "Not Specified";
    }
    this.Tags = ko.observableArray([]);
    ko.mapping.fromJS(data, {}, this);
    this.QuestionStatus = ko.computed(function () {
        return this.IsApproved ? "Pending Interview Question" : "Approved Interview Question"
    }, this);

    this.TagsText(this.TagsText() || "None");
};

// C#
public class InterviewQuestionViewModel {
    public long Id { get; set; }
    public string Text { get; set; }
    public string QuestionType { get; set; }
    public long? QuestionTypeId { get; set; }
    public string RequestorName { get; set; }
    public bool IsAdminApproved { get; set; }
    public bool IsActive { get; set; }
    public string TagsText { get; set; }
    public List<Tag> Tags { get; set; }

    public InterviewQuestionViewModel() {
        Tags = new List<Tag>();
    }
}

public class Tag {
    [Description("tag_id")]
    public long Id { get; set; }

    [Description("tag_name")]
    public string Name { get; set; }

    public bool IsActive { get; set; }

    public Tag() {
        IsActive = false;
    }
}

// Approved Questions view model
sv.ApprovedQuestionListViewModel = function () {
    var self = this;
    this.questions = ko.observableArray([]);

    this.questionCount = ko.computed(function () {
        return this.questions().length;
    }, this);

    this.load = function () {
        sv.QuestionService.getApprovedQuestions(function (data) {
            var mapped = ko.utils.arrayMap(data, function (item) {
                return new sv.QuestionViewModel(item);
            });
            self.questions(mapped);
        });
    }.bind(this);
};

Answer 1

QuestionService.saveQuestion 函数中的 ko.mapping 代码运行良好。我无法真正说出是什么导致了您的困难，因为我看不到整个应用程序。但是，如果我行使您的 QuestionService.saveQuestion 函数，它将正确地将函数范围“tags”变量的内容推送到 question.Tags 可观察数组中，并且您对 ko.mapping.toJSON 的调用正确地生成了 JSON 格式的字符串可以通过电线。

这是我运行的用于练习 QuestionService.saveQuestion 功能的客户端代码：

<script>
    sv = {};
    sv.QuestionService = function () {
        var _saveQuestion = function (question, callback) {
            var tags = [
            { Id: 1, Name: "food" },
            { Id: 2, Name: "career" },
            { Id: 3, Name: "fax" }  ];
            $.each(tags, function (index, item) {
                question.Tags.push(item);
            });
            console.log(ko.mapping.toJSON(question));

           $.ajax("/Home/saveQuestion", {
                data: ko.mapping.toJSON(question),
                dataType: "json",
                type: "post",
                contentType: "application/json",
                success: sv.Completed
            });
        };
        return {
           saveQuestion: _saveQuestion
        };
    } ();
    sv.Completed = function (data) {     
        alert(data.message);
    };

    var input = { Tags : ko.observableArray([])};
    sv.QuestionService.saveQuestion(input, sv.Completed);
</script>

当我运行这段代码时，我看到了正确序列化的 JSON 字符串调试窗口：

{"Tags":[{"Id":1,"Name":"food"},{"Id":2,"Name":"career"},{"Id":3,"Name":"fax"}]} 

我在服务器端看到了一个包含三个成员的 C# Tag 对象数组：

因此，您的 QuestionService.saveQuestion 函数正确使用 ko.mapping.toJSON 将 ViewModel 的部分序列化为 JSON 字符串。您遇到的问题必须存在于代码的其他部分。