Question

我有以下代码，我试图使用可写的计算observable来验证用户输入，并自动拒绝无效输入。这只是一些测试代码，我试图阻止用户从文本中删除逗号字符。如果用户删除逗号字符，我试图将编辑器重新绑定到先前值以覆盖最近的更改。这可能使用可写的计算字段吗？我遇到的问题是，只有当我加载页面时（在手动设置ValidText道具之后）才会触发可写计算绑定。但是当用户输入编辑器时，我无法触发它。

代码：

<script type="text/javascript">

    var model = null;

    function EditModel() {

        this.Count = 2;

        var self = this;

        this.ExistingValue = ko.observable("");

        this.ValidText = ko.computed({
            read: function () {
                return self.ExistingValue();
            },
            write: function (text) {
                if (text.split(',').length === self.Count) {
                    self.ExistingValue(text);
                }
            },
            owner: self
        });
    }

    $(document).ready(function () {

        model = new EditModel();

        model.ValidText('@(Model.Text)');

        ko.applyBindings(model);
    });

</script>

<div id="mainContainer">
    <div id="editor" contenteditable="true" class="commentEditBox" data-bind="text: ValidText, valueUpdate: 'afterkeydown'" ></div>
</div>

结束自定义绑定的想法并将代码转换为以下内容：

<script type="text/javascript">

    var model = null;

    ko.bindingHandlers.customEditorBinding = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

            $(element).on('keydown', function () {
                var observable = valueAccessor();
                observable($(this).text());
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var text = ko.utils.unwrapObservable(valueAccessor());

            if (text.split(',').length === model.Count) {
                model.ValidText(text);
                model.PreviousText = text;
                $(element).text(text);
            }
            else {
                 model.ValidText(model.PreviousText);
                $(element).text(model.PreviousText);
            }
        }
    };

    function EditModel() {

        var self = this;

        self.Count = 2;

        self.ValidText = ko.observable("");

        self.PreviousText = null;
    }

    $(document).ready(function () {

        model = new EditModel();

        model.ValidText('This is,a test');

        ko.applyBindings(model);
    });

</script>

<div id="mainContainer">
    <div id="editor" contenteditable="true" class="commentEditBox" data-bind="customEditorBinding:ValidText" ></div>
</div>

Answer 1

好吧，混淆使用self和这一点，你已经使用文本绑定到div，并且你试图在值改变时让它更新。该html元素没有任何价值，所以这就是为什么它没有被解雇。

查看custom binding并将您的写入逻辑移动到它的更新方法中。

ko.bindingHandlers.yourBindingName = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};

Answer 2

在你的write方法中，添加这个else子句：

else { self.ValidText.notifySubscribers(self.ExistingValue()); }

这将强制文本框更新回原始值。

KnockoutJS：可写的计算可观察不更新

2 个答案: