如何在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中的自定义模板

回答

相关问题