如何将 json 字符串转换为 ko.observableArray([])，他们得到一个错误数据未定义？

Question

我是knockout js的新手，我用knockout框架和ajax调用创建了一个table的数据展示。我有问题，可观察数组不应获取 table 中的值和显示。我的代码是：

$(function() {

var RacerModel = function() {   
    self.Categories = ko.observableArray([]);
    self.Message = ko.observable("Data don't loaded");
    self.GetCategories = function () {
        $.ajax({
            url: "data1.json",
            cache: false,
            type: "GET",
            datatype: "json",
            contenttype: "application/json;utf8"
        }).done(function (data) {//self.Categories(ko.mapping.fromJS(data));
        }).error(function (err) {
            self.Message("Error! " + err.status);
        });
    }
    console.log(JSON.stringify(data));

};

ko.applyBindings(RacerModel());

});

JSON 文件是：

{"categories":[{"Id":1,"Name":"Learning","UrlSlug":"0-learning","Description":"learning"},
{"Id":2,"Name":"Topics","UrlSlug":"0-topics","Description":"posts"},
{"Id":3,"Name":"Shares","UrlSlug":"category-shares","Description":"shares"},
{"Id":4,"Name":"Projects","UrlSlug":"category-projects","Description":"project"}]}

问题是 self.Categories = ko.observableArray([]);不要绑定值。它始终为空，并出现数据未定义之类的错误。如何通过json方法获取ko.observableArray([])有值。

我的示例 html 代码是：

<tbody data-bind="foreach: Categories">
    <tr>
        <td><span data-bind="text: Name"></span></td>
        <td><span data-bind="text: UrlSlug"></span></td>
        <td><span data-bind="text: Description"></span></td>
    </tr>
</tbody>

Answer 1

映射函数的正确使用方法是：

ko.mapping.fromJS(data.categories,{}, self.Categories);

看看为什么超过 here。

var RacerModel = function() {   
    self.Categories = ko.observableArray([]);
    self.Message = ko.observable("Data don't loaded");
    self.GetCategories = function () {
        //$.ajax({
        //    url: "data1.json",
        //    cache: false,
        //    type: "GET",
        //    datatype: "json",
        //    contenttype: "application/json;utf8"
        //}).done(function (data) {
        //self.Categories(ko.mapping.fromJS(data));
        //}).error(function (err) {
        //    self.Message("Error! " + err.status);
        //});
        ko.mapping.fromJS(data.categories,{}, self.Categories);
        
    }
    var data = {"categories":[{"Id":1,"Name":"Learning","UrlSlug":"0-learning","Description":"learning"},
{"Id":2,"Name":"Topics","UrlSlug":"0-topics","Description":"posts"}, {"Id":3,"Name":"Shares","UrlSlug":"category-shares","Description":"shares"}, {"Id":4,"Name":"Projects","UrlSlug":"category-projects","Description":"project"}]};

};

ko.applyBindings(RacerModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<!-- ko if: Categories().length > 0 -->
<table>
<tbody data-bind="foreach: Categories">
  <tr>
    <td><span data-bind="text: Name"></span></td>
    <td><span data-bind="text: UrlSlug"></span></td>
    <td><span data-bind="text: Description"></span></td>
  </tr>
</tbody>
</table>
<!-- /ko -->

<button data-bind="click: GetCategories">Get data</button>

如何将 json 字符串转换为 ko.observableArray([])，他们得到一个错误数据未定义？

How to convert json string to ko.observableArray([]), they get an error data is not defined?

jquery

knockout-mapping-plugin

knockout-2.0

knockout.js