knockout form data-bind submit

833 views
Skip to first unread message

my.javaa...@gmail.com

unread,
Jan 9, 2013, 8:07:37 PM1/9/13
to knock...@googlegroups.com
Almost have knockout.js form post almost working - here is what I am working on - missing something on the knockout.js form observable, please advise - thanks:

HTML:

<div class='search'>  
<h2>Search</h2>
<table>
<tr>
<td>
  <div><br></div>
    <form data-bind="submit:goSearchBiz" action="http://www.google.com" method="POST">
  <label for="biz">Search Business Name | Address:</label>
  <input type="text" id="biz" data-bind='value:bizValue' /input>
  <button type="button" data-bind='click:bizClick'>Go</button>
</form>
</td>
</tr>
<tr>
<td>
  <form data-bind="submit:goSearchZip" action="http://www.google.com" method="POST">
  <label for="zip">Search Locale Mail Code:<label>
    <input type="text" id="zip" data-bind='value:zipValue' /input>
  <button type="button" data-bind='click:zipClick'>Go</button>
</form>
</td>
</tr>
<tr>
<td>
  <form data-bind="submit:goSavedSearch" action="http://www.google.com" method="POST">
  <label for="zip">Saved Search:</label>
  <input type="text" id="saved" data-bind='value:savedValue' /input>
  <button type="button" data-bind='click:savedClick'>Go</button>
</form>
</td>
</tr>
</table>
</div>
 
knockout.js code:

var ViewModel = function() {
  var self = this;
  this.goSearchBiz = ko.observable();
  this.goSearchZip = ko.observable();
  this.goSavedSearch = ko.observable();
  this.bizValue = ko.observable();
  this.zipValue = ko.observable();
  this.savedValue = ko.observable();
 
  this.goSearchBiz = function() {
    if ((this.bizClick() != ""))
      this.bizValue = "Searching business searches....";
      return true;
  };
  this.goSearchZip = function() {
    if ((this.zipClick() != ""))
      this.zipValue = "Searching local mail code searches....";
      return true;
  };
  this.goSavedSearch = function() {
    if ((this.zipClick() != ""))
      this.savedValue = "Searching saved searches....";
      return true;
  }
}

ko.applyBindings(new ViewModel);



rpn

unread,
Jan 10, 2013, 11:56:55 PM1/10/13
to knock...@googlegroups.com, my.javaa...@gmail.com
One thing that I see is that when you set the value of an observable, you want to call it as a function and pass the new value as the first argument.

So, your calls to update the "Value" observables would look like:

 this.goSearchBiz = function() {
   
if (this.bizClick() != "") {
     
this.bizValue("Searching business searches....");
   
}

   
return true;
 
};

Hope this helps.
Reply all
Reply to author
Forward
0 new messages