rendering fb-like buttons with knockoutjs - facebook

Question

My page contains list of posts, each post has its own like button. The posts are JSON-ly retrieved from the server. Each like should have ofcourse its own href, which is part of the post json object. So naturally I'd expect this to work (assuming "fb_data"
is json object {fb_data: {href: my_post_path}):
(html fb-like widget code, with simple knockoutjs data-bind)
<li class="fb">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="85" ata-show-faces="false" data-bind="attr: {href: fb_data.href}"></div>
<span class="like-container"><span class="likebox" title=""></span> Friends<br/>Like this!</span>
</li>
so that didn't work.
I tried another approach and implemented custom binding for that purpose:
(html)
<li class="fb">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-bind="render_like: fb_data"></div>
<span class="like-container"><span class="likebox" title=""></ span> Friends<br/>Like this!</span>
</li>
(js)
ko.bindingHandlers.render_like = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var fb = valueAccessor();
$(element).attr(fb);
FB.XFBML.parse(element);
}
};
ok, that didn't work either. I turn to the hard, ugly, not elegant way and had this:
(html)
<li class="fb" data-bind="render_like: fb_data"></li>
(js)
ko.bindingHandlers.render_like = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var fb = valueAccessor();
var fb_like_str = '<div class="fb-like" data-send="false" data layout="button_count" data-width="85" data-show-faces="false"' href="' + fb.href + '" </div>';
fb_like_str += '<span class="like-container"><span class="likebox" title=""></span> Friends<br/>Like this!</span>';
$(element).html(fb_like_str);
FB.XFBML.parse(element);
}
};
that one worked, but it doesn't feel like the knockout spirit ... what
is the problem with the first 2??

Answer 1

OK, I think I've just figured out what the problem was. Initiating my viewModel should come after FB.init, like that -
window.fbAsyncInit = function() {
FB.init({appId: 172535899504455, status: true, cookie: true, xfbml: true});
var myVM = new myViewModel(rec_data, $("#myselector").get(0));
}
now the nice easy first way is working!