使用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.

据我所知，当object / embed标签进入可见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/

Here's an example of the incompatability: http://jsfiddle.net/7y3ub/41/
The code in that example will work perfectly if you simply unreference 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）在动态设置时遇到问题 src 在 embed 元素上。这是一个问题： http://code.google.com/p /铬/问题/细节？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.

一种简单的方法，可以使这项工作不必回退到不同的模板引擎是在对象元素上使用 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屋！