0

Knockout と Bootstrap を併用しています。ノックアウト テンプレート内にないアンカー タグはツールチップの効果を示しますが、テンプレート内のものはそうではありません。テンプレートの外側に html がある場合 (これは機能します。スタイル付きのツールチップがアンカーの下に表示されます)

<a data-original-title="Setup" href="'Setup" class="tip-bottom"><i class="icon-th"></i>Setup</a>

ノックアウト テンプレートが与えられた場合

<tbody data-bind="foreach: {data: providers, afterRender: KoAfterRender}">
  <tr class="">
    <td class="taskOptions">
      <a href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a>
    </td>
  </tr>
</tbody>

そして、私のViewModel内の関数

function koAfterRender(element, index, data) {
  $('.taskOptions a').popover();
}
obj.KoAfterRender = koAfterRender;

この記事.popoverに従って関数を手動で適用できることを望んでいましたが、関数を適用しても効果はありません (エラーもありません)。

何が間違っているのですか？

ありがとう。

編集: 私のコード (および Paul Manzotti によって追加されたカスタム バインディング コード) が両方とも実際に機能することに気付きました。問題は.popover()、テンプレートのアンカーに適用してもツールチップが表示されないことです。

EDIT2：私はばかです。.popover()は間違った関数です。私が欲しい.tooltip()

4

2 に答える 2

1

私はテンプレートを使用していませんが、そのページを見て、次のように使用するべきではありません:

template: { name: 'person-template', foreach: providers, afterRender: KoAfterRender }

または、カスタム バインディングを使用してポップオーバー コードを追加することもできます。各 a 要素に追加できるはずです

<a data-bind="KoAfterRender: val">

ko.bindingHandlers.KoAfterRender = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(element).popover();
    }
};
于 2013-01-17T15:21:07.867 に答える
0

だから、私自身の質問に答えるために: Knockout テンプレートのアイテムにBootstrap ツールチップを適用するには、1 つの解決策はカスタム バインディングを使用することです (Paul に感謝します)。

したがって、テンプレートが与えられます：

<tbody data-bind="foreach: {data: providers}">
    <tr class="">
        <td><a data-bind="KoAfterRender:null" href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a></td>                                    
    </tr>
</tbody>

およびカスタム バインディング:

ko.bindingHandlers.KoAfterRender = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {                                                       
        $(element).tooltip();
    }
};

データバインドされた要素のツールチップが表示されます。

于 2013-01-17T19:36:51.580 に答える