javascript - 如何在knockout js中获取json响应？

Question

我想得到一个从json到knockout js的数组。为此，我正在使用这段代码，并试图在 adobe cq 中实现。但我无法得到回应，所以任何人都可以提供帮助这是我的代码

在jsp中

 <table id="timesheets" class="table table-striped table-hover table-condensed">   
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Month</th>
        <th>Year</th>
    </tr>
</thead>
   <tbody data-bind="foreach: viewModel.timesheets">
    <tr>
        <td data-bind="text: firstname"></td>
        <td data-bind="text: lastname"></td>
        <td data-bind="text: month"></td>
        <td data-bind="text: year"></td>
    </tr>
</tbody>
 </table>

在脚本中

<script>
 $(function () {
    ko.applyBindings(viewModel);
    viewModel.loadTimesheets();
});
function timesheet(timesheet) {
    this.id = ko.observable(timesheet.id);
    this.firstname = ko.observable(timesheet.firstname);
    this.lastname = ko.observable(timesheet.lastname);
    this.month = ko.observable(timesheet.month);
    this.year = ko.observable(timesheet.year);
}
var viewModel = {
    timesheets: ko.observableArray([]),

loadTimesheets: function () {
    var self = this;
    $.getJSON("/content/personal/test0/jcr:content/content-page/horizontalline.json",function (timesheets) {
            self.timesheets.removeAll();
            $.each(timesheets, function (index, item) {
                self.timesheets.push(new timesheet(item));
            });
        }
    );
}
};

</script>

在 json 文件中

<%@page session="false" %>
<%@ page import="org.apache.sling.jcr.api.SlingRepository" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.day.cq.commons.TidyJSONWriter,
    com.day.cq.tagging.Tag,
    java.util.Locale,
    com.day.cq.wcm.api.WCMMode,
    com.day.cq.tagging.TagManager,
    com.day.cq.tagging.TagCloud" %>

<%

//Local variables
final SlingRepository repos = sling.getService(SlingRepository.class);
final UserManagerFactory umFactory = sling.getService(UserManagerFactory.class);
String pagepath = properties.get("propagePath","");
Session session = null;
List<String> list = new ArrayList<String>();
String listString = "";

try
{

    // Ensure that the currently logged on user has admin privileges.
    session = repos.loginAdministrative(null);

    final TidyJSONWriter writer = new TidyJSONWriter(response.getWriter());

list.add("a");
list.add("b");
list.add("a");
list.add("b");
list.add("a");
list.add("b");

    //Begin writing JSON response
    writer.object();
    writer.key("tagarray").array();
    Iterator<String> it = list.iterator();

        while(it.hasNext()) {
        listString += it.next();
            if(it.hasNext()) {
            listString += ",";
            }
        }
    writer.value(listString);
    writer.endArray();
    writer.endObject();
    session.logout();
}
catch (Exception e)
{
    System.out.println("myajaxsample Exception Occured: " + e.getMessage());
}
finally
{
    session.logout(); 
    session = null;
}
%>

请帮助我解决这个问题，因为我是 knockout 的新手

Answer 1

你需要这样的脚本

function timesheet(timesheet) {
    this.id = ko.observable(timesheet.id);
    this.firstname = ko.observable(timesheet.firstname);
    this.lastname = ko.observable(timesheet.lastname);
    this.month = ko.observable(timesheet.month);
    this.year = ko.observable(timesheet.year);
}
var viewModel = {
    timesheets: ko.observableArray([]),
    loadTimesheets: function () {
        var self = this;
        $.getJSON("/content/aib/personal/test0/jcr:content/content-page/horizontalline.json",function (timesheets) {
                self.timesheets.removeAll();
                self.timesheets(timesheets)
            }
        );
    }
};

 $(function () {
    ko.applyBindings(viewModel);
    viewModel.loadTimesheets();
});