Question

我的视图模型有一个属性，它的值会因某种原因更新一个数据绑定元素而不是另一个元素。

当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>

不是。那是为什么？

此外，当我最初打开页面时，非工作元素显示，然后隐藏然后显示。好像已经改变了3次。

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>

Answer 1

我怀疑闪烁与你正在使用的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的值正确更新的。

可观察值更新更改一个绑定元素，但不更改另一个绑定元素

1 个答案: