Databases
StackOverflow2013
Postsdbo
POrendering fb-like buttons with knockoutjs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POrendering fb-like buttons with knockoutjs
    text
    copied!<p>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}):</p> <pre><code>(html fb-like widget code, with simple knockoutjs data-bind) &lt;li class="fb"&gt; &lt;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}"&gt;&lt;/div&gt; &lt;span class="like-container"&gt;&lt;span class="likebox" title=""&gt;&lt;/span&gt;&amp;nbsp;Friends&lt;br/&gt;Like this!&lt;/span&gt; &lt;/li&gt; </code></pre> <p>so that didn't work. I tried another approach and implemented custom binding for that purpose:</p> <pre><code>(html) &lt;li class="fb"&gt; &lt;div class="fb-like" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-bind="render_like: fb_data"&gt;&lt;/div&gt; &lt;span class="like-container"&gt;&lt;span class="likebox" title=""&gt;&lt;/ span&gt;&amp;nbsp;Friends&lt;br/&gt;Like this!&lt;/span&gt; &lt;/li&gt; (js) ko.bindingHandlers.render_like = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { var fb = valueAccessor(); $(element).attr(fb); FB.XFBML.parse(element); } }; </code></pre> <p>ok, that didn't work either. I turn to the hard, ugly, not elegant way and had this:</p> <pre><code>(html) &lt;li class="fb" data-bind="render_like: fb_data"&gt;&lt;/li&gt; (js) ko.bindingHandlers.render_like = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { var fb = valueAccessor(); var fb_like_str = '&lt;div class="fb-like" data-send="false" data layout="button_count" data-width="85" data-show-faces="false"' href="' + fb.href + '" &lt;/div&gt;'; fb_like_str += '&lt;span class="like-container"&gt;&lt;span class="likebox" title=""&gt;&lt;/span&gt;&amp;nbsp;Friends&lt;br/&gt;Like this!&lt;/span&gt;'; $(element).html(fb_like_str); FB.XFBML.parse(element); } }; </code></pre> <p>that one worked, but it doesn't feel like the knockout spirit ... what is the problem with the first 2??</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload