使用 Knockout.js 控制 Flash 插件，冲突的 jQuery.tmpl 和 Knockout-Sortable [英] Controlling Flash Plugins with Knockout.js, Conflicting jQuery.tmpl and Knockout-Sortable

问题描述

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

I'm trying to render HTML for embedding Flash objects using Knockout.js' native templating faculties. jQuery.tmpl does the job perfectly well, however I cannot use it due to conflicts with the Knockout-sortable plugin.

以下是使用原生模板的 flash 插件的示例:http://jsfiddle.net/7y3ub/35/
在 Chrome 中，播放器永远不会出现.在 Firefox 中，如果您在选中复选框时更改频道，播放器将显示.然而，重新选中该框会使玩家再次消失.

Here's an example of flash plugins quirking with the native templating: http://jsfiddle.net/7y3ub/35/
In Chrome, the player just never shows up. In Firefox, the player will show up if you change the channel while the checkbox is checked. Rechecking the box however makes the player vanish again.

'if' 绑定是必要的，因为在页面的持续时间内可能有许多 Flash 插件加载和卸载实例.

The 'if' binding is necessary due to the fact that there may be many instances of flash plugins loading and unloading over the duration of the page.

据我所知，当对象/嵌入标签进入可见 DOM 时，HTML 需要全部就位.这就是为什么 jQuery.tmpl 在我的情况下会很棒的原因.我已经尝试自己形成 HTML 字符串，但我不知道如何应用和维护新标记包含的绑定.

From what I can tell, the HTML needs to all be in place by the time the object/embed tags enter into the visible DOM. This is why jQuery.tmpl would be great in my case. I've tried forming the HTML string myself, but I do not know how to apply and maintain the bindings that the new markup contains.

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

Bottom line, I either need a way to instantly render the HTML while still supporting bindings, or find a way to make jQuery.tmpl and Knockout-sortable compatable with each other.

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

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

The error message in the console seems to imply that the context is not being adjusted properly, or rather the implied foreach is not executing. The message becomes even more unusual in this tweak where the SubItem objects are replaced with simple strings: http://jsfiddle.net/7y3ub/43/

推荐答案

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

I am not sure about the jQuery Tmpl incompatibility. I will have to look into that further. It would be nice though, if you did not need to use jQuery Tmpl just for this purpose.

看起来某些浏览器(尤其是 Chrome)在动态设置 embed 元素上的 src 时存在问题.这是一个问题:http://code.google.com/p/chromium/issues/detail?id=69648.这是一个类似的问题:动态更改嵌入视频IE/Chrome 中的 src(适用于 Firefox)

Looks like some browsers (Chrome especially) have an issue with dynamically setting the src on an embed element. Here is an issue: http://code.google.com/p/chromium/issues/detail?id=69648. Here is a similar question: Dynamically change embedded video src in IE/Chrome (works in Firefox)

因此，要使此工作正常进行，我们必须避免在元素上使用 attr 绑定，因为它会导致此问题.

So, to make this work, we have to avoid using the attr binding on the element, as it will cause this issue.

无需回退到不同的模板引擎即可完成这项工作的一种简单方法是在 object 元素上使用 html 绑定.应该是这样的:

A simple way to make this work without having to fall back to a different template engine is to use the html binding on the object element. It would be like:

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

使用 JavaScript，例如:

With JavaScript like:

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);
};

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

It is unfortunate that we need to build the "Template" in our view model, but it seems like a reasonable workaround to this issue.

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

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

As an alternative, you could consider using a custom binding. Perhaps one that clones the node, applies the attr binding, and swaps it with the original. This would avoid embedding the template in the view model. I can't see other uses for this binding other than this scenario, but here is a sample implementation: http://jsfiddle.net/rniemeyer/rGP7z/

这篇关于使用 Knockout.js 控制 Flash 插件，冲突的 jQuery.tmpl 和 Knockout-Sortable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！