使用knockoutjs渲染类似fb的按钮

发布于 2025-01-07 17:23:47 字数 1980 浏览 0 评论 0原文

我的页面包含帖子列表，每个帖子都有自己的“喜欢”按钮。这些帖子是从服务器以 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个有问题吗？

原文

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??

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉殇 2025-01-14 17:23:47

好吧，我想我刚刚弄清楚问题出在哪里。启动我的 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));
}

现在，简单的第一种方法正在工作！

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!

回复收藏 0 原文

~没有更多了~