0

我想更改 facebook 之类的按钮设置，例如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 按钮中不起作用。我缺少什么。谢谢你的建议...

4

1 回答 1

0

绑定完成后，需要自定义绑定来强制 FB API 重新解析您的嵌入标签。查看本指南：

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

于 2015-02-16T18:10:25.393 回答