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!).
