Question

我有一个基本上有一些属性的表单，这些属性在几个项目之间共享。当您选择项目的单选按钮时，文本框会启用数据输入，一次只能选择一个项目。

我已经完成了所有设置和工作，但我不希望在禁用控件的情况下在文本框中显示绑定值。我一直在努力与处理程序合作，但我正在努力了解如何让事情按照我需要的方式运作。我查看了Ryan和他提供的自定义处理程序的许多文章，但我需要一个顿悟，但在此之前我正在寻求你的帮助。另外，有没有更合适的方法来处理我创建的IsEnabled函数或者这是最好的方法？

以下是JSFiddle

已更新 JSFiddle，而不是执行我尝试创建禁用和删除值的自定义处理程序的值。它有点工作，但它会在几次更新后停止，并且值不会更新。

以下是一些示例HTML：

<ul>
    <li>
        <input type="radio" name="item" value="1" data-bind="checked:Selected" /> Item 1 <input type="text" data-bind="value:Price, enable:IsEnabled('1')" />
        </li>
    <li>
        <input type="radio" name="item" value="2" data-bind="checked:Selected" /> Item 2 <input type="text" data-bind="value:Price, enable:IsEnabled('2')" />
        </li>
    <li>
        <input type="radio" name="item" value="3" data-bind="checked:Selected" /> Item 3 <input type="text" data-bind="enabledValue:Price, enable:IsEnabled('3')" />
        </li>
    <li>
        <input type="radio" name="item" value="4" data-bind="checked:Selected" /> Item 4 <input type="text" data-bind="enabledValue:Price, enable:IsEnabled('4')" />
        </li>
</ul>

以下是JS示例：

var vm = {
    Selected: ko.observable('1'),
    Price: ko.observable(12), 
    IsEnabled: function(item){
        var selected = this.Selected();
        return (selected == item)
    }    
}

ko.applyBindings(vm);

(function (ko, handlers, unwrap, extend) {
    "use strict";
    extend(handlers, {
        enabledValue: {
            init: function (element, valueAccessor, allBindings) {
                var bindings = allBindings();
                var enabled = ko.unwrap(bindings.enable);
                var value = unwrap(valueAccessor());

                if (enabled)
                    handlers.value.init();
            },
            update: function (element, valueAccessor, allBindings) {
                var bindings = allBindings();
                var enabled = ko.unwrap(bindings.enable);
                var value = unwrap(valueAccessor());

                    handlers.value.update(element,function() {
                        if(enabled)
                            return valueAccessor(value);                       

                    });
            }
        }
    });
 }(ko, ko.bindingHandlers, ko.utils.unwrapObservable, ko.utils.extend));

Answer 1

贝。我刚刚简化了您的示例并使其在不同项之间共享相同的值属性。绑定将存储内部计算并将元素绑定到它的主要思想。

extend(handlers, {
    enableValue: {
        init: function (element, valueAccessor, allBindings) {

            var showValue = ko.computed({
                read: function(){
                    if (unwrap(allBindings().enable)) {
                        return unwrap(valueAccessor());
                    } else {
                        return '';
                    }
                },
                write: valueAccessor()
            });

            ko.applyBindingsToNode(element, { value: showValue });

        }
    }
});

http://jsfiddle.net/7w566pt9/4/

请注意，在KO 3.0中，ko.applyBindingsToNode已重命名为ko.applyBindingAccessorsToNode。

但是，让每个项的绑定记住最后输入的值是不是更有意义？实施起来非常简单。

<强>更新

记住特定项目的最后编辑值与您应该在内部保留该值的方式类似showValue。我们将其命名为lastValue：

extend(handlers, {
    enableValue: {
        init: function (element, valueAccessor, allBindings) {

            // Create observable `lastValue` with some default content.
            // It will be created for EVERY binding separately.
            var lastValue = ko.observable(0);

            // If an item is currently enabled then set `lastValue` to the actual value.
            if (unwrap(allBindings().enable)) lastValue(unwrap(valueAccessor()));
            // This piece will be executed only once (for the selected item) and other
            // items will store default value in `lastValue`!

            // It's the internal anonymous computed intended to update bound
            // price to reflect currently edited value.
            ko.computed(function(){
                if (unwrap(allBindings().enable)) valueAccessor()(lastValue());
            });
            // Note that passed function will be triggered whenever item is enabled
            // and/or `lastValue` changes.

            // Here we just change valueAccessor() to `lastValue`.
            var showValue = ko.computed({
                read: function(){
                    if (unwrap(allBindings().enable)) {
                        return lastValue();
                    } else {
                        return '';
                    }
                },
                write: lastValue
            });

            ko.applyBindingsToNode(element, { value: showValue });

        }
    }
});

http://jsfiddle.net/7w566pt9/8/

我希望它几乎与你的期望相符。通常在这种情况下，真实问题不是实现功能，而是描述功能应该如何工作。

Answer 2

由于我对答案的补充已被删除，我已添加此答案以帮助那些新来的KO。

这是使用ko.applyBindingAccessorsToNode的KO 3.0实现。

extend(handlers, {
    enableValue: {
        init: function (element, valueAccessor, allBindings) {

            var showValue = ko.computed({
                read: function () {
                    if (unwrap(allBindings().enable)) {
                        return valueAccessor(); // CHANGED
                    } else {
                        return '';
                    }
                },
                write: valueAccessor //CHANGED
            });

            ko.applyBindingAccessorsToNode(element, { value: showValue }); //CHANGED

        }
    }
});

如发行说明中所述，目前还没有官方文档，但这是我能够整理的内容。我使用组消息来确定差异。希望这会节省一些时间，直到它有更多的文档。

Release Notes

ko.applyBindingsToNode被取代 ko.applyBindingAccessorsToNode。第二个参数接受一个对象带有绑定对和值访问器（返回的绑定函数）约束力）。它也可以采用返回这样的函数宾语。（此界面目前尚未在网站上记录。）

来自Michael Best的

Group Message说明它更好。

Compatibility Issue

如果禁用文本框值，则使用Knockout自定义处理程序隐藏文本框值

2 个答案: