无法使用attr绑定绑定embed标记中的src属性

Question

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

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

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

Answer 1

问题是不，src属性没有受到Knockout的约束：那个位工作正常，你可以从你的小提琴的截图中看出开放工具打开：

KnockoutJS正确设置了src属性。

您遇到了this issue的变体（{3}}，其中浏览器不喜欢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标记上看到更改。

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