【问题标题】:NotifySubscribers is not refreshing UI (Writable Computed)NotifySubscribers 不刷新 UI(可写计算)
【发布时间】:2014-12-31 10:21:27
【问题描述】:

我在自定义绑定中计算了一个可写对象,以格式化一个可观察对象。但是,当用户删除格式化掩码时,读取函数不会触发,因为 observable 正在删除所有非数字,好的,它应该正常工作,所以我添加了 notifySubcribers 来调用 read 每次,即使 observable 值没有更改及其工作,但 ui 元素不刷新新值(读取返回)

关注代码:

ko.bindingHandlers.conta = {
    init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var observable = valueAccessor(), formatted = ko.computed({
        read : function() {
            var val = ko.unwrap(valueAccessor());
            if (!val) return val;
            if (val.toString().length < 6) { 
                val =  zeroPad(val, 6);
                observable(val);
            }
            return val.toString().slice(0, val.toString().length - 1) + "-" + val.toString().slice(val.toString().length - 1);
        },
        write : function(value) {

            if (value) {
                value = zeroPad(value, 6);
            }

            observable(value.replace(/\D/g, ''));
            observable.notifySubscribers();
        }
    });

        if ($(element).is('input')) {
            ko.applyBindingsToNode(element, {
                numbersOnly : true,
                maxLength : 10,
                value : formatted
            });
        } else {
            ko.applyBindingsToNode(element, {
                numbersOnly : true,
                text : formatted
            });
        }

        return {
            controlsDescendantBindings : true
        };
    }
};

有人可以在这里给我一些指示吗?

谢谢:D

【问题讨论】:

  • 你能扩展你的代码并把它变成一个小的复制品吗?编辑器的工具栏上有一个“Stack Snippet”按钮,它甚至可以让你让它在 SO 上运行。
  • 嘿,我做了一个例子:jsfiddle.net/Lyad24p4 如果你删除“-”,敲除将调用读取方法..但返回值不会更新元素 =(

标签: javascript knockout.js


【解决方案1】:

notify: always 扩展formatted 计算的obs:

ko.bindingHandlers.conta = {
    init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var observable = valueAccessor(), formatted = ko.computed({
            ...
        }).extend({ notify: 'always' });
...

这将强制它始终通知,即使没有更改。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-01-16
    • 1970-01-01
    • 2016-11-03
    • 2011-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多