1

テキストバインディングが機能し、値が機能しないのはなぜですか.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>

JSFiddle http://jsfiddle.net/mounir/V3nVd/15/の完全な例を次に示します。

ありがとう

4

3 に答える 3

2

レンダリング.popoverされたテンプレートの html をdata-属性にコピーします。

動的に挿入された html にバインディングが適用されないようです。そして、value:バインディング (ko デフォルト) は、javascript.value('sample text')メソッドを介して入力を設定します。つまり、本質的に、コピーされた HTML:

<p>Name: <input type="text" data-bind='value: $data.name'></p>
<p>Email: <b data-bind='text: $data.email'>ben@msn.com</b></p>

ただ：

<p>Name: <input type="text"></p>
<p>Email: <b>ben@msn.com</b></p>

したがって、空のタグ<input>が設定されています。<b>

これを回避するには、ノックアウトで のvalue属性を<input>必要な値に設定します。

<p>Name: <input type="text" data-bind="attr: { value: $data.name }"></p>
<p>Email: <b data-bind="text: $data.email"></b></p>

これにより、<input>. ただし、値はもはや観察できないことを覚えておいてください。

が呼び出されるたびに値が更新されますが.popover、ポップオーバーが表示されている間にオブザーバブルが更新された場合は更新されません。を編集してオブザーバブルを更新することもできません<input>。

<input>カスタム バインディングを拡張して、ポップオーバーが閉じたときに から値を取得し、オブザーバブルに戻すなど、これらすべてを考慮に入れることを検討する必要があります。

于 2012-10-23T16:40:34.073 に答える
0

答えてくれてありがとうセティ。ええ、でも入力を監視できるようにしたくない場合は、init関数でviewModelを渡し、popoverdivでバインディングを適用する必要があります。クリックイベントが採用されたときのポップオーバーごとに、ko.applyBindings(viewModel, thePopover);

ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var attribute = ko.utils.unwrapObservable(valueAccessor());
        var cssSelectorForPopoverTemplate = attribute.content;
        var popOverTemplate = "<div id='"+attribute.id+"-popver'>" + $(cssSelectorForPopoverTemplate).html() + "</div>";
        $(element).popover({
            content: popOverTemplate,
            html: true,
            trigger: 'manual'
        });

        $(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popver");
            ko.applyBindings(viewModel, thePopover);
        });
    },
};
于 2012-10-24T08:22:54.920 に答える
0

これは完全に機能する例です。たとえば、ルート ビューモデルの関数にボタンを関連付けたい場合は、バインド コンテキスト $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);
        });

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

于 2012-10-24T14:48:19.030 に答える