Knockout and Clear Text Box Button

Question

I created a Plunker here: http://plnkr.co/edit/EWh3DI8fkckU9mKGqWhS

I am either very tired or just not able to see what's going on. This code displays "Hello World" in the text box in VS 2013 but for some reason jQuery doesn't seem to be working in Plunker. I'm new to Plunker and that's not really my question.

My question is how to get the Clear Text Box button to clear the text in the text box using a Knockout observable. I created a simple model using the Revealing Pattern and then defined the value in the text box to be an observable (using data-bind and applybindings). But setting the vm public variable after KO binding doesn't change the value in the text box.

What am I missing?

So sorry--I saw many other messages that asked not for code but for a Plunker link! I didn't think of doing both but will do so in the future as I see some answers already that look promising. Thank you. — Jazimov, Apr 02 '14 at 17:05
@haim770: You're correct--I *had* the observable in my code and then through lots of testing a fatigue, I somehow removed it! Thank you. — Jazimov, Apr 02 '14 at 17:08

score 1 · Accepted Answer · answered Apr 02 '14 at 15:32

Your apply bindings function needs an ending parenthesis

$(function () {  
    ko.applyBindings(vm);
  }) <--here

essayText should be and observable

var essayText = ko.observable("Hello World");

and thus, essayText should be modified the way observables are modified

function cleartb()
  {
    vm.essayText('');
    return;
  }

score 0 · Answer 2 · answered Apr 02 '14 at 15:39

I like plunker, but for these quick help questions, JSFiddle with cdnjs for external resources are faster (IMO). Anyway, here's a different approach and here's a JSFiddle

var ViewModel = function(){
    var _self = this;
    _self.EssayText = ko.observable("Hello World");
    _self.ClearTextBox = function(){
      _self.EssayText("");  
    };
};

ko.applyBindings(new ViewModel());

The Markup

<div class="container">
    <div class="row">
        <div class="col-md-2">Enter Text Here (Starting Value Should Be 'Hello World'):</div>
        <div class="col-md-10">
            <textarea id="TextEditor" data-bind="value: EssayText"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-info" data-bind="click: ClearTextBox">Clear Text Box</button>
        </div>
    </div>
</div>

Thank you Mark B, I will use JSFiddle in the future especially for posts here. Thanks for your example but I really needed to stick with the Reveal Pattern. I'm sure someone else will benefit from your alternative approach, which I appreciated seeing. — Jazimov, Apr 02 '14 at 19:17

Knockout and Clear Text Box Button

2 Answers2