Question

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

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

'if'绑定是必要的，因为在页面持续时间内可能有很多flash插件加载和卸载。

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

最重要的是，我要么需要一种方法来立即呈现HTML，同时仍然支持绑定，或者找到一种方法使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）在src元素上动态设置embed时遇到问题。这是一个问题：http://code.google.com/p/chromium/issues/detail?id=69648。这是一个类似的问题：Dynamically change embedded video src in IE/Chrome (works in Firefox)

因此，为了使这项工作，我们必须避免在元素上使用attr绑定，因为它会导致此问题。

使用此工作而不必回退到其他模板引擎的简单方法是在html元素上使用object绑定。这就像是：

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

遗憾的是，我们需要在视图模型中构建“模板”，但这似乎是解决此问题的合理方法。

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

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

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

1 个答案: