Knockout.js로 페이스 북 데이터 - *를 동적으로 변경하십시오.

Question

wix.com의 HTML 편집기와 같은 버튼 설정과 같이 페이스 북을 변경하고 싶습니다.

은 내가 뷰 모델 생성 :

<script> 
    //Asynchronous JavaScript loading 
    (function (d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
    var viewModel = { 
     //Facebook Button 
     LayoutStyles: ko.observableArray([ 
      { Title: "Standart", Value: "standart" }, 
      { Title: "Button", Value: "button_count" }, 
      { Title: "Box", Value: "box_count" }]), 
     ColorSchemes: ko.observableArray([ 
      { Title: "Light", Value: "light" }, 
      { Title: "Dark", Value: "dark" }]), 
     selectedStyleValue: ko.observable(), 
     selectedColorValue: ko.observable(), 
     withFaces: ko.observable(false), 
     withSend: ko.observable(true), 
     width: ko.observable(450) 
    }; 
    ko.applyBindings(viewModel); 
</script> 

를 그리고 난 이런 FB 버튼 위치 :

<div id="fb-root"> 
</div> 
<div class="fb-like" data-bind="attr:{ 'data-width':width,'data-send':withSend,'data-show-faces':withFaces}"> 
<h4>Facebook Like Button Settings </h4> 
      <div class="control-group"> 
       <label class="control-label" style="white-space:nowrap;">Layout Style</label> 
       <div class="controls"> 
        <select class="" data-bind="options:LayoutStyles,optionsText:'Title',optionsValue:'Value',value:selectedStyleValue"></select> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" style="white-space:nowrap;">Color Scheme</label> 
       <div class="controls"> 
        <select data-bind="options:ColorSchemes,optionsText:'Title',optionsValue:'Value',value:selectedColorValue"></select> 
       </div> 
      </div> 
      <div class="control-group"> 
       <div class="controls"> 
        <label class="checkbox"> 
         <input type="checkbox" data-bind="checked:withFaces" /> Show Faces 
        </label> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label">Width</label> 
       <div class="controls"> 
        <input type="text" id="fbWidth" data-bind="value:width, valueUpdate:'afterKeyDown'" /> 

       </div> 
      </div> 

</div> 

나는 폭 입력 변경을하지만 그것은 내가 부족 FB-button.What에서 작업을 나던 . 의견을 보내 주셔서 감사합니다 ...

Answer 1

바인딩이 완료된 후 FB API가 삽입 태그를 다시 구문 분석하도록 강제하려면 맞춤 바인딩이 필요합니다. 체크 아웃이 가이드 : SDK를 초기화 한 후에는 XFBML 버튼에 수정을 한 경우는 변경 사항을 인식하도록

http://weblogs.asp.net/jimwang/implementing-a-facebook-like-button-with-knockout-js