Question

My view model has a property who’s value updates one data-bound element but not another for some reason.

When signUpModel.fullNameActive value changes via the blur and focus events on the input the following:

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

is updated, but the following:

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

is not. Why is that?

Also, when I initially open the page, the non-working element shows, then hides and then shows. As if it’s been changed 3 times.

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;       
    }

With this view code:

<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

I suspect that the flashing has something to do with the fadeVisible binding that you are using.

Something like this would be a simple implementation:

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();
    }

Try to reconcile yours with this fiddle: http://jsfiddle.net/rniemeyer/f3XMN/

Both elements appear to be updated properly based on the value of fullNameActive.