javascript - 如何延迟绑定(bind) KnockoutJS observable

标签 javascript knockout.js knockout-mapping-plugin knockout-2.0

我有一个带有一些可观察对象的 ViewModel 和一个只有在应用绑定(bind)后才知道的属性。

例如,我的用户界面包含一个搜索框,该搜索框在下方显示匹配项。最初, View 模型中匹配项的属性为 null,因为没有要附加的数据。但是,一旦搜索框至少包含 3 个字符,它就会进行 AJAX 调用并获取数据。

当我调用映射插件时,要将调用中的数据映射到 KO,就好像 KO 不能后期绑定(bind)可观察数组一样。问题是我没有任何东西可以给它映射以首先设置绑定(bind)。

我的代码:

  var vm = new function () {
        var self = this;

        self.customers = null;
        self.searchText = ko.observable("");

        self.searchText.subscribe(function (data) {
            if (data.length > 2) {
                // do search
                $.get("/customers/getall", { searchTerms: self.searchText }, function (resp) {

                    if (!self.customers) {
                        // first mapping
                        self.customers= ko.mapping.fromJS(resp.customers);
                    } else {
                        ko.mapping.fromJS(self.customers, resp.customers);
                    }
                });
            } 
        });

    }

    ko.applyBindings(vm, $("#searchCustomersScope")[0]);

最佳答案

一旦绑定(bind)运行,KO 就无法知道创建的任何新可观察对象(除了在模板场景中)。

最初您可能希望将 self.customers 创建为一个空的可观察数组,然后您可以允许映射插件对其进行更新。

有几种方法可以做到这一点,但像这样:

    self.customers = ko.observableArray();
    self.searchText = ko.observable("");

    self.searchText.subscribe(function (data) {
        if (data.length > 2) {
            // do search
            $.get("/customers/getall", { searchTerms: self.searchText }, function (resp) {
                    ko.mapping.fromJS(resp.customers, {}, self.customers);
            });
        } 
    });

关于javascript - 如何延迟绑定(bind) KnockoutJS observable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11647439/

相关文章:

knockout.js - 嵌套对象的 knockout 自定义映射

ajax - KnockoutJS 更新 observableArray AJAX 的正确方法

knockout.js - KnockOut 映射分层 JS 对象

javascript - jQuery - 悬停动画

javascript - 在此示例中,为什么 window.getSelection() on focus 在 Chrome 中不起作用?

knockout.js - knockout 虚拟滚动绑定(bind)

javascript - 通过对象初始化可观察对象

javascript - 这个递归函数如何改变 'history' 变量?

javascript - 使用 getElementByClassName 构建对象数组

javascript - 在knockoutjs中向选择添加2路值