无法使用 attr 绑定在嵌入标签中绑定 src 属性答案

【问题标题】：Not able to bind src attribute in embed tag using attr binding无法使用 attr 绑定在嵌入标签中绑定 src 属性
【发布时间】：2016-05-23 18:20:25
【问题描述】：

textbox 绑定良好，但 embed 标记中的 src 属性根本不绑定。为什么？

http://jsfiddle.net/pscr43sc/1/

<input type='text' data-bind='value: 123'/>
<embed data-bind="attr: {src: 'http://google.com'}" />

【问题讨论】：

<embed src="http://google.com"/> 在不被淘汰的情况下工作吗？
尝试将嵌入标签更改为<embed ...></embed>。我感觉标签被分解了，所以绑定很奇怪。
OP，我已经删除了所有以前的 cmets 以稍微清理一下帖子（我建议你也这样做），并将其中的所有信息重新混合成一个答案。

标签： javascript dom knockout.js

【解决方案1】：

问题是不是 src 属性没有被 Knockout 绑定：该位工作正常，从打开开发工具的小提琴截图中可以看出：

src 属性由 KnockoutJS 正确设置。

您正在体验this issue（的变体），其中浏览器不喜欢src 在此类元素上动态更改的事实。提到的解决方法大多归结为重新创建整个元素，这很容易用 KnockoutJS 完成。

这是一个“天真的”示例，它允许一些“脏”的 KnockoutJS 代码，因为它在视图中包含一些 DOM 操作：

function RootViewModel() {
  var self = this;
  self.link = ko.observable("//placehold.it/50");
  self.embedHtml = ko.computed(function() {
    return "<embed src='" + self.link() + "' />"; // Might need some sanitation on "link()"
  });
}

ko.applyBindings(new RootViewModel());

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div data-bind="html: embedHtml"></div>
<hr>Change link: <input data-bind="value: link">
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

如果您更改链接（例如将“50”更改为“200”）并模糊输入字段，您将在 embed 标记上看到更改。

请注意，以上内容实际上是从another SO answer 重新混合（并且解决方案应归功于@RPNiemeyer）another SO answer，这也继续提出替代方案。使用该替代方法，您将创建一个自定义绑定处理程序，该处理程序在视图模型更新时克隆 embed 节点，更改 src 属性，然后用 DOM 中的克隆替换原始节点。好处是您的视图模型中没有 DOM 代码。答案以this jsfiddle 为例。

【讨论】：