2

ノックアウト テンプレートをブートストラップ ポップオーバーのコンテンツとして使用するにはどうすればよいですか?

4

2 に答える 2

5

あなたが探しているものは正確には明らかではありません。これが役立つことを願っているサンプルフィドルです：

http://jsfiddle.net/V3nVd/3/

次の 2 つの概念を示します。

1) カスタム バインディングを使用して目的のポップオーバー属性を追加する

2) テンプレートを使用して、ポップオーバー付きのボタンを作成するために使用される HTML (カスタム バインディングを含む) をカプセル化します。

ポップオーバーに送信できるオプションは次のとおりです。

編集: http://jsfiddle.net/V3nVd/7/

レンダリングされたテンプレートから html コンテンツをプルすることを示すようにフィドルを更新しました。また、ポップオーバーの初期化での html オプションの使用にも注意してください。

于 2012-09-09T21:08:04.937 に答える
0

テキストバインディングを値バインディングに変更した場合、値はレンダリングされませんでした。jqueryでIDを持つ要素を選択し、コンソールに値を出力すると、値は正しいですが、表示されません。

<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <input type="text" data-bind='value: $data.name'></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

</ p>

これが例ですhttp://jsfiddle.net/mounir/V3nVd/15/

ありがとう

編集：

これは完全に機能する例です。たとえば、ボタンをルートviewModelの関数に関連付けたい場合は、バインディングコンテキスト$rootと$parentを含めるようにを変更ko.applyBindings()しました。ko.applyBindingsToDescendants

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });

@JSFiddlehttp : //jsfiddle.net/mounir/Mv3nP/4/をご覧ください

于 2012-10-22T10:03:16.033 に答える