我正在尝试使用动态代码填充文本区域,该动态代码会随着客户端上的事件 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>