控制Flash插件與Knockout.js，衝突jQuery.tmpl和淘汰賽排序

Question

我想呈現HTML嵌入使用Knockout.js的本機模板功能的Flash對象。 jQuery.tmpl完美地完成了這項工作，但是由於與Knockout-sortable插件衝突，我無法使用它。

下面是一個Flash插件與本機模板不同的例子：http://jsfiddle.net/7y3ub/35/
在Chrome中，玩家只是從不出現。在Firefox中，如果在複選框被選中時更改頻道，播放器將顯示出來。然而重新檢查盒子會讓玩家再次消失。

'if'綁定是必要的，因爲在頁面的持續時間內可能有很多flash插件的加載和卸載實例。

從我所知道的，當對象/嵌入標籤進入可見DOM時，HTML需要全部到位。這就是爲什麼jQuery.tmpl在我的情況下會很棒。我嘗試過自己編寫HTML字符串，但我不知道如何應用和維護新標記包含的綁定。底線，我需要一種方式來即時呈現HTML，同時仍支持綁定，或者找到一種方法使jQuery.tmpl和Knockout可排序的相互兼容。

---

這裏是不相容的例子：http://jsfiddle.net/7y3ub/41/
在該示例中的代碼將很好地工作，如果你只是unreference jQuery.tmpl。 http://jsfiddle.net/7y3ub/42/

控制檯中的錯誤消息似乎意味着上下文未被正確調整，或者確切地說，隱含的foreach沒有執行。在這種調整中，消息變得更加不尋常，其中SubItem對象被替換爲簡單字符串：http://jsfiddle.net/7y3ub/43/

Answer 1

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