javascript - 具有空数据模型的 Knockout.js applyBindings

Question

是否可以在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>

Answer 1

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

您必须了解您的 ViewModel 本身已经是一个函数。初始化时，您可以在 View 模型中直接调用 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 将自动更新。