2

Knockout.jsのネイティブテンプレート機能を使用してFlashオブジェクトを埋め込むためのHTMLをレンダリングしようとしています。jQuery.tmplは完全にうまく機能しますが、Knockout-sortableプラグインとの競合のため、使用できません。

ネイティブテンプレートを使用したフラッシュプラグインの例を次に示します。http：//jsfiddle.net/7y3ub/35/ Chrome
では、プレーヤーが表示されません。Firefoxでは、チェックボックスがオンになっているときにチャネルを変更すると、プレーヤーが表示されます。ただし、チェックボックスを再度オンにすると、プレーヤーは再び消えます。

ページの期間中にフラッシュプラグインのロードとアンロードのインスタンスが多数存在する可能性があるため、「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/

4

1 に答える 1

2

jQuery Tmpl の非互換性についてはよくわかりません。私はそれをさらに調べなければなりません。ただし、この目的のためだけに jQuery Tmpl を使用する必要がなければ、それは素晴らしいことです。

一部のブラウザー (特に Chrome)srcでは、embed要素に を動的に設定する際に問題があるようです。ここに問題があります: http://code.google.com/p/chromium/issues/detail?id=69648。同様の質問があります: IE/Chrome で埋め込みビデオ src を動的に変更する (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 に答える