2016-01-04 2 views
1

Застрял в библиотеке нокаута javascipt. Итак, я хочу реализовать простой форум. У меня есть файл javascript с двумя запросами ajax, темами и сообщениями. И у меня есть html-шаблон.Нокаут не отобразил шаблон с моими данными

function dealModel() { 
    var self = this; 
    self.board = ko.observableArray([]); 
    var res = []; 

    $.getJSON("http://someaddress/threads", function(data) { 
    $.each(data, function(i, thread) { 
     var js = jQuery.parseJSON(thread); 
     js.posts = ko.observableArray([]); 
     var postres = [] 
     $.getJSON("http://someadress/posts/" + js.id, function(postdata) { 
     $.each(postdata, function(idx, post){ 
      var jspost = jQuery.parseJSON(post); 
      postres.push(jspost); 
     }) 
     }) 

     js.posts(postres); 
     res.push(js); 
    }) 

    self.board(res); 
    }) 
} 
$(document).ready(function(){ 
    ko.applyBindings(new dealModel()); 
}); 
var testdata = [{text : "text 1"} , {text : "text2"}] 

Это мой код js. Он отлично работает с темами, но когда я помещаю свои сообщения, мой наблюдаемый массив «сообщений» уже пуст. Для теста я создал тестовый массив «testdata» (см. Ниже) и передал свой наблюдаемый массив. И javascript работает отлично. Вот мой шаблон

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script> 

<script type="text/javascript" src="ajaxknockout.js"></script> 
</head> 
<body> 
    <div class='board'> 
    <div class='threads' data-bind="foreach: board"> 

    <p data-bind="text: title"></p> 

    <div class= "posts" data-bind="foreach: $data.posts"> 

    <p data-bind="text: text"> </p> 
    </div> 
    </div> 


</div> 
</body>> 
</html> 

Так что, я думаю, что что-то плохое с моими постами JSON. Вот оно.

["{\"createTime\": \"Monday, 04. January 2016 05:53PM\",\"thread_id\": \"2\",\"text\": \"post 1\",\"id\": \"4\"}", "{\"createTime\": \"Monday, 04. January 2016 05:53PM\",\"thread_id\": \"2\",\"text\": \"post 2\",\"id\": \"5\"}", "{\"createTime\": \"Monday, 04. January 2016 05:53PM\",\"thread_id\": \"2\",\"text\": \"post 3\",\"id\": \"6\"}"] 

У меня есть вопрос. Что не так с моим кодом? Почему нокаут понимает мои тестовые данные, но полностью отклоняет производственные данные?

+1

Похоже, ваш JSON содержит массив строк, а не массив объектов. Вы должны проверить, как JSON формируется и хранится на стороне сервера. –

+0

@f_martinez, не могли бы вы привести пример массива corrent json? Я не видел никаких ошибок в моем json – zealot

+0

Ваш json в порядке. Я только что заметил, что вы применяете 'parseJSON' к каждому элементу. На самом деле ответ, предложенный Николаем, прав. –

ответ

1

Это потому, что эта часть вашего первого запроса JSon:

js.posts(postres); 

выполняет перед обратным вызовом из вашего второго запроса JSon где вы потянув сообщения. Вы должны изменить это так массив сообщений заполняется, прежде чем делать js.posts(postres);, например так:

$.getJSON("http://someadress/posts/" + js.id, function(postdata) { 
    $.each(postdata, function(idx, post){ 
     var jspost = jQuery.parseJSON(post); 
     postres.push(jspost); 
    }) 
    js.posts(postres); 
}) 
+0

Да, я пропустил эту ошибку, спасибо, теперь все в порядке. – zealot

Смежные вопросы