Question

我的页面包含帖子列表，每个帖子都有自己喜欢的按钮。这些帖子是从服务器中检索的JSON。每个人都应该拥有自己的href，这是post json对象的一部分。所以很自然地我希望这可以工作（假设“fb_data” 是json对象{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>&nbsp;Friends<br/>Like this!</span>
</li>

因此无效。我尝试了另一种方法并为此目的实现了自定义绑定：

(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>&nbsp;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);
    }
};

好吧，那也不起作用。我转向坚硬，丑陋，不优雅的方式并且有这个：

(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>&nbsp;Friends<br/>Like this!</span>';
        $(element).html(fb_like_str);
        FB.XFBML.parse(element);
   }
};

那个人工作了，但是感觉不像淘汰赛的精神......什么是第2个问题？

Answer 1

好的，我想我刚刚弄明白问题是什么。启动我的viewModel应该在 FB.init之后，就像那样 -

window.fbAsyncInit = function() {
    FB.init({appId: 172535899504455, status: true, cookie: true, xfbml: true});
    var myVM = new myViewModel(rec_data, $("#myselector").get(0));
}

现在好的第一种方式就是工作！

用knockoutjs渲染类似fb的按钮

1 个答案: