Как преобразовать строку json в ko.observableArray ([]), они получают данные об ошибках не определены? - PullRequest
Новая
       35

Как преобразовать строку json в ko.observableArray ([]), они получают данные об ошибках не определены?

0 голосов
/ 22 сентября 2018

Я новичок в нокауте JS, я создаю таблицу отображения данных с каркасом нокаута и вызовом ajax.У меня Проблема с наблюдаемым массивом не должна получать значения и отображаться в таблице.Мой код: 

$(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 ([]);не связывайте значение.Он всегда пуст и получил ошибку, как будто данные не определены.Как получить ko.observableArray ([]) имеет значение с помощью метода json.

Мой пример 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>

1 Ответ

0 голосов
/ 22 сентября 2018

Это был бы правильный способ использования функции отображения: 

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

Узнайте, почему здесь . 

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>
...