在 Knockout 绑定数据之前查看渲染答案

【问题标题】：View Renders before Knockout Binds Data在 Knockout 绑定数据之前查看渲染
【发布时间】：2013-04-16 04:32:12
【问题描述】：

我确信以前有人问过这个问题，但可惜我找不到 - 任何能帮助我指出正确方向的帮助将不胜感激。

我正在使用 Durandal 加载视图/视图模型，并且在激活方法期间，我要求获取单个记录然后显示。我正在取回记录（检查了 XHR 响应并且所有数据都恢复正常），但我只能假设视图在数据准备好显示之前正在加载。没有 JS 错误，完全没有错误，但我的屏幕中间只有一个大空白，即使我知道数据应该显示...

视图模型：

define(['durandal/system', 'services/logger', 'services/datacontext'], function (system, logger, datacontext) {
    var aForm = ko.observable();
    var initialized = false;

    function activate(routeData) {
        var id = parseInt(routeData.id);
        return refresh(id);
    };

    function refresh(id) {
        return datacontext.getaFormById(id, aForm);
    }

    var vm = {
        activate: activate,
        aForm: aForm,
        title: "THE TITLE DISPLAYS JUST FINE"
    }
    return vm;
});

查看：

<h3 class="page-title" data-bind="text: title"></h3>

<div class="container-fluid" data-bind="with: aForm">
    <div class="row-fluid">
        <div class="span12">
            <strong>Testing</strong>
            <strong data-bind="text: id"></strong>        
        </div>
    </div>

    <h2 data-bind="text: description"></h2>
    <h2 data-bind="text: checkType().description"></h2>
</div>

我投入了强大的测试，它甚至不渲染，只有标题。谁能指出我正确的方向？我会创建一个小提琴，但是当我对 ViewModel 中的数据进行硬编码时它会起作用。

编辑：

好吧，在深入研究之后，我可能没有正确返回对象，特别是在 data.entity 返回类型中。这会导致问题吗？

    var getaFormById = function (aFormId, aFormObservable) {

        var query = EntityQuery.from('aForms')
            .where('id', '==', aFormId);

        return manager.executeQuery(query)
            .then(querySucceeded)
            .fail(queryFailed);

        function querySucceeded(data) {
            if (aObservable) {
                aObservable(data.entity);
            }
            logger.log('Retrieved selected [aForm] from remote data source', data, system.getModuleId(datacontext), true);
        }
    }

【问题讨论】：

在您的视图模型中，您有 aForm，但在您的 html 中，您有 templateForm.. 这是您的问题中的错字吗？
是的，错字已修复，谢谢。更改它的易读性，错过了 html。我希望它像额外的一样愚蠢；但如果是的话，那是在暗示我过去 4 个小时。
看来您在此处发布的代码过于简化了。根据您的代码，我无法重现您的问题。在异步设置 aForm 后视图绑定良好。
我不确定还有什么对发布有帮助。有人有想法吗？现在一直困扰着我。如果我打破绑定，则会出现强大的“测试”，但是当我修复绑定时，它会再次消失。有没有可能没有发生回调？
我能够通过变通解决此问题并以不同方式返回 aForm，但我仍然希望看到正确的方法，因此我将保留此问题

标签： asp.net-mvc knockout.js breeze single-page-application durandal

【解决方案1】：

您没有在 executeQuery 成功回调中正确填充您的 observable，这就是您的 UI 未正确呈现的原因。

从 executeQuery documenation successFunction 调用，并使用以下参数

successFunction([数据])

数据对象

结果实体数组

...

所以你需要从 data.results 数组中填充你的 observable 而不是形成 data.entity （它只是返回未定义）：

if (aObservable) {
   aObservable(data.results[0]);
}

【讨论】：

请注意，它似乎没有返回未定义，只是不是 KnockOut 想要看到的

【解决方案2】：

您可以通过从激活函数返回一个 jQuery promise() 来告诉 Durandal 推迟绑定。

请参阅 Ryan Keeter 的视频了解说明：http://www.youtube.com/watch?v=w_XjWg6xL8I

【讨论】：