рендеринг fb-подобных кнопок с knockoutjs - PullRequest
Новая
       20

рендеринг fb-подобных кнопок с knockoutjs

1 голос
/ 19 февраля 2012

Моя страница содержит список сообщений, у каждого сообщения есть своя кнопка «Мне нравится».Сообщения JSON-ly получены с сервера.Каждый лайк должен иметь свой собственный 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?

1 Ответ

0 голосов
/ 21 февраля 2012

ОК, думаю, я только что понял, в чем проблема. Инициирование моей 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));
}

теперь работает первый простой способ!

...