0

我正在尝试使用动态代码填充文本区域，该动态代码会随着客户端上的事件 id 更改而更改。我的以下实现如下，我不确定是否有更好的方法。我遇到了两个问题。第一个是我想在绑定 html 后删除 data-bind 元素，并在 textarea 中显示它，第二个 javascript 正在消失。想法？当你复制和粘贴他们的代码时，我正在尝试做谷歌分析所做的事情，但我的在页面上是动态的。

查看模型

<script type="text/javascript">

    app.viewModel.members.widgets = {
        type: ko.observable(),
        code: ko.observable(),
        list: [
            { id: 'registration', type: '@((int)WidgetType.Registration)' },
            { id: 'payments', type: '@((int)WidgetType.Payments)' }
        ]
    };


    app.viewModel.members.widgets.selectedWidget = ko.computed(function() {

        if (!app.viewModel.members.widgets.type())
            return null;

        return ko.utils.arrayFirst(app.viewModel.members.widgets.list, function(widget) {
            return widget.type == app.viewModel.members.widgets.type();
        });
    });


    ko.bindingHandlers.initializeValueWithHtml = {
        update: function(element, valueAccessor) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value($(element).html());
            }
        }
    };

</script>

输入

<textarea data-bind="value: code, click: function(vm, e)  { $(e.currentTarget).select(); } ">
            </textarea>

模板

   <pre class="hidden" data-bind="if: $root.members.widgets.selectedWidget(), initializeValueWithHtml: code">
            <div data-bind="attr: { id: 'ebt-' + $root.members.widgets.selectedWidget().id,  'data-href': 'https://test.com/widgets/v1/' +  $root.members.widgets.selectedWidget().id + '?eventid=@Model.EventId    ' }" data-width="100%" data-height="500px"></div>
            <script type="text/javascript">
                (function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.async = true;
                        js.src = "//test.com/scripts/exposure.widgets.min.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                })(document, "script", "ebt.widgets");
            </script>
        </pre>
4

1 回答 1

1

将您的代码模板保存在 pre 中可能会做一些奇怪的事情，并使您更加困难。相反，我建议为您的代码模板使用字符串，如下所示：

var codeTemplate = 
'<div id="ebt-{0}" data-href="https://test.com/widgets/v1/{1}?eventid=@Model.EventId" data-width="100%" data-height="500px"></div>\n' +
'<script type="text/javascript">\n' +
'    (function (d, s, id) {\n' +
'        var js, fjs = d.getElementsByTagName(s)[0];\n' +
'        if (!d.getElementById(id)) {\n' +
'          js = d.createElement(s);\n' +
'          js.id = id;\n' +
'          js.async = true;\n' +
'          js.src = "//test.com/scripts/exposure.widgets.min.js";\n' +
'          fjs.parentNode.insertBefore(js, fjs);\n' +
'        }\n' +
'    })(document, "script", "ebt.widgets");\n' +
'<\/script>';

然后创建一个计算值，它将根据您的 observables 填写该模板中的参数：

app.viewModel.code = ko.computed(function() {
    var selected = app.viewModel.members.widgets.selectedWidget();
    if (selected) {
        var result = codeTemplate.replace('{0}',selected.id).replace('{1}',selected.id);
        return result;
    } else {
        return "";
    }
});

然后，您可以删除initializeValueWithHtml绑定。

这是一个小提琴：http: //jsfiddle.net/tlarson/Ycz5Q/

对于小提琴，我不确定类型应该是什么，因为我不了解您的服务器端模型，所以我将它们设置为 1 和 2。

要使用小提琴，请在第一个框中键入 1，然后将其关闭。将第一个框中的值更改为 2，然后将其关闭。根据第一个框中的值，您应该会看到适当的代码加载到第二个框中。

于 2013-05-17T14:13:01.720 回答