Knockout js: Uncaught Error: Unable to parse bindings. Message: ReferenceError: blah is not defined; Bindings value: click: blah, attr: {twitter_id: id}

I'm still learning knockout js, and so far I must say it's nice to have the framework worry about the DOM for you while you worry only about the view model. I ran into an issue just now with knockout complaining about something like this:

Uncaught Error: Unable to parse bindings.

Message: ReferenceError: blah is not defined; Bindings value: click: blah, attr: {twitter_id: id}

Here is my original code:

           <ol data-bind="foreach: {data: results}"> 

                <li> 

                     <div class="well"> 

                          <div class="stream-item-header"> 

                               <img data-bind="attr: {src: profileImageUrl}"> <strong 

                                    data-bind="text: name"></strong><span></span> <span 

                                    data-bind="text: screenName"></span> 

                          </div> 

                          <div> 

                               <span class="search-description" data-bind="text: description"></span> 

                               <span data-bind="text: location"></span> 

                               <p data-bind="text: url"></p> 

                               <button data-bind="click: $parent.blah, attr: {twitter_id: id}" 

                                    class="btn btn-large btn-primary select-business" type="submit">Select 

                                    Business</button> 

                          </div> 

                     </div> 

                </li> 

           </ol>  

In my js code:

 function SearchViewModel() { 

      var self = this; 

      self.results = ko.observableArray(); 

      self.blah = function() { 

           alert('hello'); 

      }; 

 }  

Okay so what is going on I was wondering? Why doesn't this work? After a minute, then I realized that of course it won't work. When it is rendering the button, it is rendering a row at a time. And since I defined the method on the view model, that row does not have access to my blah function, so it complained.

To solve the problem, I changed to the following in the view code:

           <ol data-bind="foreach: {data: results}"> 

                <li> 

                     <div class="well"> 

                          <div class="stream-item-header"> 

                               <img data-bind="attr: {src: profileImageUrl}"> <strong 

                                    data-bind="text: name"></strong><span></span> <span 

                                    data-bind="text: screenName"></span> 

                          </div> 

                          <div> 

                               <span class="search-description" data-bind="text: description"></span> 

                               <span data-bind="text: location"></span> 

                               <p data-bind="text: url"></p> 

                               <button data-bind="click: $parent.blah, attr: {twitter_id: id}" 

                                    class="btn btn-large btn-primary select-business" type="submit">Select 

                                    Business</button> 

                          </div> 

                     </div> 

                </li> 

           </ol>  

Knockout provides a way for a row to reference its root path but prefixing the '$' symbol (don't confuse this for jQuery, we're still in the view code!).