如何在Knockout中綁定到自定義bindingHandler中的自定義模板

我需要生成Bootstrap彈出窗口。我找到了一兩篇文章，但在我的情況下，它們似乎並沒有100％的效果。我可以讓Popover顯示，但是模板中的綁定沒有綁定。如何在Knockout中綁定到自定義bindingHandler中的自定義模板

這裏是我的自定義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是table的td節點內，從而內結合我允許container傳遞作爲body看到的是引導內需要這樣的Popovers一個表：

<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項目。我所看到的只是5，我只是爲了看到有什麼東西進入而致力於Full Weeks Hours。

內綁定boundTemplate變量具有內完整的HTML和KO的代碼。我只是似乎需要通過某種處理方法之前，它被放入酥料餅爲content: boundTemplate將變成Number(TotalTime()).toFixed(2)到一定的參考價值運行。

來源

2017-08-02 Grandizer

請張貼了正確的答案，並標出答案接受。 – Nisarg

@NisargShah我已將我的解決方案轉移到答案。在2天內（當我被允許時），我會將其標記爲答案。 – Grandizer

太好了。謝謝！ – Nisarg

與同事溝通後，這是解決方案（注意以//爲前綴的評論）：

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"); 
    }); 
    } 
};

來源

2017-08-02 20:39:26 Grandizer

如何在Knockout中綁定到自定義bindingHandler中的自定義模板

回答

相關問題