javascript-用Knockout.js控制Flash插件,导致jQuery.tmpl和Knockout-Sortable冲突

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

这是一个带有本地模板怪异的Flash插件示例：http://jsfiddle.net/7y3ub/35/
在Chrome中,播放器永远不会显示.在Firefox中,如果您在选中复选框的情况下更改频道,则会显示播放器.但是,重新选中该框会使播放器再次消失.

由于在页面持续时间内可能会有许多Flash插件加载和卸载的事实,因此必须使用’if’绑定.

据我所知,当对象/嵌入标签进入可见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/

解决方法:

我不确定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绑定,因为它将导致此问题.

无需依靠其他模板引擎即可完成此工作的简单方法是在object元素上使用html绑定.就像：

<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/

标签：javascript,jquery,knockout-js,jquery-templates,knockout-sortable
来源： https://codeday.me/bug/20191011/1896458.html