javascript - 无法使用 attr 绑定(bind)在嵌入标记中绑定(bind) src 属性

Question

textbox 绑定(bind)得很好，但 embed 标记中的 src 属性根本没有绑定(bind)。为什么？

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

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

Answer 1

问题是不是，src属性没有被Knockout绑定(bind):这个位工作得很好，你可以从你的 fiddle 截图中看出开发工具打开:

KnockoutJS 正确设置了 src 属性。

您正在经历(一种变体)this issue浏览器不喜欢 src 在此类元素上动态更改的事实。提到的解决方法主要归结为重新创建整个元素，这使用 KnockoutJS 很容易做到。

这是一个“天真的”示例，它允许一些“脏”KnockoutJS 代码，因为它在 View 中包含一些 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 标记上看到更改。

请注意，上面的内容实际上是从(解决方案应归功于@RPNiemeyer)another SO answer 重新混合的。 ，这也提出了一种替代方案。使用该替代方案，您可以创建一个自定义绑定(bind)处理程序，该处理程序在 View 模型更新时克隆 embed 节点，更改 src 属性，然后用克隆中的克隆替换原始节点DOM。这样做的好处是 View 模型中没有 DOM 代码。答案链接到this jsfiddle举个例子。