2

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

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

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

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

4

1 回答 1

2

我不确定 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/

于 2012-12-27T15:40:25.870 回答