使用Knockout.js动态更改facebook数据

Change facebook data-* dynamically with Knockout.js

本文关键字:facebook 数据 动态 Knockout js 使用      更新时间:2023-09-26

我想更改类似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-button中不起作用。我缺少什么。谢谢你的建议。。。

需要自定义绑定,以强制FB API在绑定完成后重新解析嵌入标记。查看此指南:

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