ノックアウトのカスタムbindingHandler内でカスタムテンプレートにバインドする方法

Question

私はブートストラップポップオーバーを生成する必要があります。私は1つか2つの記事を見つけましたが、私の状況では100％動かないようです。 Popoverを表示させることはできますが、テンプレート内のバインディングはバインドされていません。ここで

は私のカスタムbindingHandlerです：

ko.bindingHandlers.popover = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var $element = $(element); 
    var attribute = ko.utils.unwrapObservable(valueAccessor()); 
    var placement = attribute.placement || "top"; 
    var trigger = attribute.trigger || "click"; 
    var template = attribute.template; 
    var container = attribute.container || false; 
    var boundTemplate = $(template).html(); 

    $element.popover({ 
     container: container, 
     placement: placement, 
     trigger: trigger, 
     html: true, 
     content: boundTemplate 
    }); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $element.popover("destroy"); 
    }); 
    } 
}; 

htmlは、このように結合以内に私はブートストラップは、内Popoversのためにこれを必要とすることを見てcontainerがbodyとして渡すことができ、tableのtdノード内にあります表：

：

<span class="bottom-right faded" 
     data-toggle="popover" 
     title="Weekly Breakdown:" 
     data-trigger="hover" 
     data-bind="text: Number(PayPeriodTime()).toFixed(2), css: { 'less-hours': HasRequiredHours() === false, 'requirement-met': (HasRequiredHours() && WorkDays() > 0) }, popover: { template: '#weekly-template', placement: 'left', container: 'body', trigger: 'hover' }"></span> 

最後には、ここに私のカスタムテンプレートです

<script type="text/html" id="weekly-template"> 
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 
    <table class="table table-bordered"> 
    <tr> 
     <td>Full Weeks Hours</td> 
     <td data-bind="text: Number(TotalTime()).toFixed(2)">5</td> 
    </tr> 
    <tr> 
     <td>Required Hours</td> 
     <td data-bind="text: Number(RequiredHours()).toFixed(2)"></td> 
    </tr> 
    <tr> 
     <td>Entered Hours</td> 
     <td data-bind="text: Number(PayPeriodTime()).toFixed(2)"></td> 
    </tr> 
    <tr> 
     <td>Remaining Needed</td> 
     <td data-bind="text: Number(RequiredHours() - PayPeriodTime()).toFixed(2)"></td> 
    </tr> 
    </table> 
</script> 

pre要素は、ここに何を入れても一見空ではありません。 hoverにポップアップが表示されると、htmlは表示されますが、私のko項目はレンダリングされません。私が見ているのは、Full Weeks Hoursのために、何かが入ってくるのを見るために強制する5です。結合内

boundTemplate変数は中内完全なHTMLとKOコードを持っている。私はそれがcontent: boundTemplateとポップオーバーに入れされる前に、いくつかの値にNumber(TotalTime()).toFixed(2)に変わります処理方法のいくつかの並べ替えてこれを実行する必要があるように見えます。

Answer 1

同僚と話した後、これを溶液（//で始まるコメントに注意してください）です。

ko.bindingHandlers.popover = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var $element = $(element); 
    var attribute = ko.utils.unwrapObservable(valueAccessor()); 
    var placement = attribute.placement || "top"; 
    var trigger = attribute.trigger || "click"; 
    var template = attribute.template; 
    var container = attribute.container || false; 

    var rawTemplate = $(template).html(); // Updated code 
    var boundContent = $("<div></div>"); // New code 
    boundContent.html(rawTemplate); // New code 

    ko.applyBindings(bindingContext, boundContent.get(0)); // New code 

    $element.popover({ 
     container: container, 
     placement: placement, 
     title: title, 
     trigger: trigger, 
     html: true, 
     content: boundContent // Updated code 
    }); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $element.popover("destroy"); 
    }); 
    } 
};