未绑定Pager.js数据的敲除

Question

我是knockout JS和Pager.JS的新手，我正在尝试在ajax请求上绑定数据。但它不起作用。

define(['knockout', 'pager'], function (ko, pager) {
var viewModel = {
    preview: function(page) {
        pager.navigate('#Preview');
    }
};

$.getJSON(contentUrl + 'api/Data/UserData', function (data) {
    var jsonData = JSON.parse(data);
    formViewModel = ko.mapping.fromJS(jsonData, {}, viewModel );
    ko.applyBindings(formViewModel);
});

pager.extendWithPage(viewModel);
ko.applyBindings(viewModel);
pager.start();
});


<div data-bind="page: {id: 'start', title: 'User Details'}" class="off">
<form id="userDetails" name="userDetails" method="post">

    <div class="details">
        <div class="columns clearfix">
            <div class="row">
                <div class="label">User Name</div>
                <span data-bind="text: Name" class="txt"></span>
            </div>
            <div class="row">
                <div for="Address" class="label">User Address</div>
                <span data-bind="text: Address" class="txt"></span>
            </div>

        </div>
    </div>
    <div class="nav-buttons hide-for-print">
        <a href="#Preview" data-bind="click: preview" class="btn" id="preview">Preview</a>
    </div>

</form>
</div>

<div data-bind="page: {id: 'Preview', title: 'User Details| Preview'}" class="off">
Preview page

</div>

<div data-bind="page: {id: '?'}" class="off">
<h2>Error</h2>
<p>The page you requested does not exist.</p>
<p><a data-bind="page-href: '../'" id="">Go back</a></p>
</div>

我不明白我错过了什么。如果我不发出ajax请求并绑定硬编码的数据，绑定就会正常工作。

谢谢

Answer 1

据猜测，我建议这与调用ko.applyBindings两次有关，我也不认为fromJS在进行更新时会返回任何东西。同样，我不认为在更新模式下调用该方法会在视图模型上创建可观察对象，尽管在这一点上我可能是错的，但我总是在进行更新映射之前进行“创建”映射。

我会更像这样做：

var viewModel = {};

$.getJSON(contentUrl + 'api/Data/UserData', function (data) {
    var jsonData = JSON.parse(data);
    viewModel = ko.mapping.fromJS(jsonData, {});
    viewModel.preview = function(page){
        pager.navigate('#Preview');
    };
});

pager.extendWithPage(viewModel);
ko.applyBindings(viewModel);
pager.start();