可观察值更新只会改变一个绑定元素，而不会改变另一个

Observable value update changes one bound element but not another

本文关键字：改变 元素 绑定 一个 另一个 观察 更新      更新时间：2023-09-26

我的视图模型有一个属性，它的值更新一个数据绑定元素，但不更新另一个。

当signUpModel.fullNameActive值通过blur和focus事件在input上发生变化时:

<span data-bind="text: signUpModel.fullNameActive"></span>

已更新，但以下内容:

<p class="inputTip" data-bind='visible: signUpModel.fullNameActive'>
  Enter your first and last name
</p>

不是。为什么呢?

同样，当我最初打开页面时，会显示非工作元素，然后隐藏，然后显示。好像已经改了三次了

var signUpModel = new SignUpModel();
    $(document).ready(function () {
        ko.applyBindings(signUpModel);
    });
    function SignUpModel() {        
        this.userID = ko.observable("");
        this.userName = ko.observable("");
        this.fullName = ko.observable("");
        this.fullNameActive = ko.observable(false);
        this.sex = ko.observable("");
        this.dateOfBirth = ko.observable("");
        this.emailAddress = ko.observable("");
        this.profileImage = ko.observable("");
        this.levelID = 1;       
    }

使用这个视图代码:

<div class="fieldContainer">
    <span data-bind="text: signUpModel.fullNameActive"></span>           
    <input type="text" data-bind="event: {blur: function(){signUpModel.fullNameActive(true)}, focus: function(){signUpModel.fullNameActive(false)} }, value: signUpModel.fullName, valueUpdate: 'afterkeydown'" maxlength="40" id="inputFullName" />
    <div class="inputHelp">
        <p class="inputTip" data-bind='visible: signUpModel.fullNameActive'>
            Enter your first and last name</p>
        <p class="isRequired" data-bind='fadeVisible: signUpModel.fullName().length < 1 || signUpModel.fullName().replace(/'s/g,"") == ""'>
            Gotta enter something</p>
        <p class="isGood" data-bind='fadeVisible: signUpModel.fullName().length > 1 && signUpModel.fullName().replace(/'s/g,"") != ""'>
            This is exciting <span id="personsName" data-bind="text: signUpModel.fullName"></span>
        </p>
    </div>
</div>

我怀疑闪烁与您正在使用的fadeVisible绑定有关。

像这样的东西将是一个简单的实现:

ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        $(element).toggle(ko.utils.unwrapObservable(valueAccessor()));
    },
    update: function(element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor()) ? $(element).fadeIn() : $(element).fadeOut();
    }

试着调和你的小提琴:http://jsfiddle.net/rniemeyer/f3XMN/

两个元素似乎都是根据fullNameActive的值正确更新的。

相关文章：