How to properly use visible binding in KnockoutJS

Question

I want the .controls div to be visible only when the value in the textbox is _OTHER . Here's the code I'm using:

<div class="controls" data-bind="
    visible: title == '_OTHER'
">            
    @Generic.Selection <i data-bind="text: $index() + 1"></i>
    <input type="text" id="inputAnswerContent" data-bind="value: title" />
    <a href="#" class="btn btn-small" data-bind="
        visible: $parent.requireOfferedAnswer, 
        click: $parent.addAnswer
    ">
        <i class="icon-plus"></i>
    </a>
</div>

However, it's visible for all values other than _OTHER .

Answer 1

You want to use `visible: title() == '_OTHER' (with parentheses).

Simplified example ( jsfiddle ):

HTML

<div class="controls" data-bind="visible: title() == '_OTHER'">            
hello world
</div>
<input type="text" data-bind="value : title"></input>

JS

function ViewModel() {
    this.title = ko.observable();
}

var vm = new ViewModel();

ko.applyBindings(vm);

Type _OTHER in the text box to make hello world appear.