javascript - 使用 Knockout.js 控制 Flash 插件，冲突的 jQuery.tmpl 和 Knockout-Sortable

Question

我正在尝试使用 Knockout.js 的 native 模板功能呈现 HTML 以嵌入 Flash 对象。 jQuery.tmpl 完美地完成了这项工作，但是由于与 Knockout-sortable 插件冲突，我无法使用它。

这是一个 flash 插件与 native 模板不一致的示例:http://jsfiddle.net/7y3ub/35/
在 Chrome 中，播放器永远不会显示。在 Firefox 中，如果您在选中复选框时更改 channel ，播放器将会显示。然而，重新选中该框会使玩家再次消失。

“if”绑定(bind)是必需的，因为在页面持续时间内可能有许多 Flash 插件加载和卸载实例。

据我所知，HTML 需要在对象/嵌入标签进入可见 DOM 时就位。这就是为什么 jQuery.tmpl 对我来说会很棒。我已经尝试自己构建 HTML 字符串，但我不知道如何应用和维护新标记包含的绑定(bind)。

归根结底，我要么需要一种方法来立即呈现 HTML，同时仍然支持绑定(bind)，要么找到一种方法使 jQuery.tmpl 和 Knockout-sortable 相互兼容。

---

这是不兼容的示例:http://jsfiddle.net/7y3ub/41/
如果您简单地取消引用 jQuery.tmpl，该示例中的代码将完美运行。 http://jsfiddle.net/7y3ub/42/

控制台中的错误消息似乎暗示上下文未正确调整，或者更确切地说，隐含的 foreach 未执行。在此调整中，消息变得更加不寻常，其中 SubItem 对象被替换为简单的字符串:http://jsfiddle.net/7y3ub/43/

Answer 1

我不确定 jQuery Tmpl 的不兼容性。我将不得不进一步调查。不过，如果您不需要为此目的使用 jQuery Tmpl，那就太好了。

看起来某些浏览器(尤其是 Chrome)在动态设置 embed 元素上的 src 时存在问题。这是一个问题:http://code.google.com/p/chromium/issues/detail?id=69648 .这是一个类似的问题:Dynamically change embedded video src in IE/Chrome (works in Firefox)

因此，要使其正常工作，我们必须避免在元素上使用 attr 绑定(bind)，因为它会导致此问题。

无需回退到不同的模板引擎即可完成这项工作的一种简单方法是在 object 元素上使用 html 绑定(bind)。就像:

<p data-bind="if: StreamEnabled">
  <object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" data-bind="html: Template">
  </object>
</p>​

像这样使用 JavaScript:

var ViewModel = function() {
    this.StreamEnabled = ko.observable(false);
    this.Channel = ko.observable("saltwatercams");
    this.Template = ko.computed(function() {
        return "<param name=\"movie\" value=\"" + this.Channel() + "\"></param><embed width=\"320\" height=\"240\" type=\"application/x-shockwave-flash\" src=\"http://cdn.livestream.com/grid/LSPlayer.swf?channel=" + this.Channel() + "\"></embed>";
    }, this);
};

不幸的是，我们需要在我们的 View 模型中构建"template"，但这似乎是解决此问题的合理解决方法。

此处示例:http://jsfiddle.net/rniemeyer/CWPwj/

作为替代方案，您可以考虑使用自定义绑定(bind)。也许一个克隆节点，应用 attr 绑定(bind)，并将其与原始节点交换。这将避免将模板嵌入到 View 模型中。除了这种情况，我看不到此绑定(bind)的其他用途，但这是一个示例实现:http://jsfiddle.net/rniemeyer/rGP7z/