CODEWITHSUNDEEP
knockout.js
The Jonas Persson
The Jonas Persson

Reputation: 1746

Dynamically esponsive attribute in knockoutJS

I'm new to knockoutJS and I really like it. My problem is that I can't figure out how to include some sort of validation in the binding. What I'm trying to do is to disable a button unless there is text in the text field. 

<input type="text" name="answer" id="txtAnswer" placeholder="Answer..." data-bind="value: NewAnswer" />
<button data-inline="true" data-bind="click: addAnswer, enable: NewAnswer() != ''" >Add</button>

In my viewmodel I have self.NewAnswer = ko.observable($("#txtAnswer").val())

I've tried everything I can think of, but can't make the button responsive. It seems to evaluate once, on page load, then nothing changes.

Any help appreciated.

Upvotes: 0

Views: 55

Answers (1)

Justin Helgerson
Justin Helgerson

Reputation: 25551

Your observable looks funky. You don't need a jQuery selector inside of the call to observable. You link the observable to an element via the data-bind attribute:

self.NewAnswer = ko.observable(''); //replace '' with any default value you want

Then your markup:

<input type="text" name="answer" id="txtAnswer" placeholder="Answer..." data-bind="value: NewAnswer" />

Edit

Here is a jsFiddle to demonstrate the working example: http://jsfiddle.net/c6uts/

Upvotes: 2

Related Questions