Wix.comの HTML エディターのように facebook のようなボタンの設定を変更したい。
ビューモデルを作成しました：
<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 ボタンでは機能しません。あなたの提案に感謝します...