Pager.js 数据不绑定的淘汰赛答案

【问题标题】：Knockout with Pager.js data not bindingPager.js 数据不绑定的淘汰赛
【发布时间】：2013-12-23 00:46:51
【问题描述】：

我是淘汰 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 请求并绑定硬编码数据，则绑定有效。

谢谢

【问题讨论】：

标签： jquery c#-4.0 knockout.js pagerjs

【解决方案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();

【讨论】：