具有空数据模型的 Knockout.js applyBindings答案

【问题标题】：Knockout.js applyBindings with empty data model具有空数据模型的 Knockout.js applyBindings
【发布时间】：2013-02-25 18:10:52
【问题描述】：

viewModel的dataModel未知时是否可以applyBindings？我的问题是 dataModel 结构是在页面上调用 ajax 后首先知道的，我理解 knockout.js 的方式是 viewModel 应该在页面加载时初始化？

代码失败，nCustomerId 未定义。

我应该如何处理？我可以等待调用 ko.applyBindings() 直到我知道 dataModel 结构（我在 ajax 调用之后执行），但是在使用 knockout.js 时这是正确的方法吗？

function initModel () {
var kunderModel = function () {
    var self = this;
    self.list = ko.observableArray();
    self.selectedItem = ko.observable();
    self.newItem = ko.observable();  

    self.add = function () {
        self.selectedItem(newItem(self.newItem));
        showInputContainer();
    };

    self.getList = function () {
        var nButikId = jQuery("#butikid").val();
        jQuery.ajax({
            url: "crm_service.wso/Dan_Butik_Kunder_Tabel/JSON/",
            data: { nButikId: nButikId },
            success: function (data) {
                self.list(data);
            },
            complete: function () {
                connectExt.UIElements().Loading(false);
            }
        });
    }
}
}

    _viewModel = new kunderModel();
    ko.applyBindings(_viewModel);

    jQuery(document).ready(function () {
        initModel();
    });

<div data-bind="template: { name: 'editTmpl', data: selectedItem }"></div>

<script id="editTmpl" type="text/html">      
    <div  class="opretContainer">
        <div class="opretContainerTitle">
            <span data-bind="visible: nCustomerId == 0">New</span>
            <span data-bind="visible: nCustomerId != 0">Edit</span>
        </div>
    </div>
</script>

【问题讨论】：

在 AJAX 调用之后执行。

标签： javascript knockout.js

【解决方案1】：

您不需要 initFuction。您应该做的是直接在 JQuery 文档回调中初始化 _viewModel。

您必须了解您的 ViewModel 本身已经是一个函数。您可以在视图模型初始化时直接在视图模型中调用 getList 函数。

我会做什么：

jQuery(document).ready(function () {
    _viewModel = new kunderModel();
    ko.applyBindings(_viewModel);    
});

比在 kunderModel 内部：

var kunderModel = function () {
   var self = this;
   self.list = ko.observableArray();

   self.getList = function () {
       var nButikId = jQuery("#butikid").val();
       jQuery.ajax({ ... });
   };

   self.getList();
}

这样，getList 方法会在 ViewModel 创建结束时被调用。（我认为它是一个由“构造函数”调用的方法。由于一切都是可观察的，所以当执行回调时，您的 UI 将自动更新。

【讨论】：

谢谢！也有助于更多地了解 knockout.js 的性质 :)