从knockoutjs绑定调用模板

时间：2012-03-09 21:11:41

标签： knockout.js

在knocoutjs绑定中，我想生成一些HTML并将其生成一个元素。此HTML与我已有的模板相同。我尝试做了显而易见的事，并从另一个绑定调用模板绑定，但是我收到一个错误，如下所示。

我的电话

// doc is a parameter to the method
var $assessments = $('div');
var docfcn = function() { return doc; }
var defaultAllBindingContexts = function() { return {}; }
ko.bindingHandlers.template.update($assessments, function() {return {name: 'assessmentControls', data: docfcn};}, defaultAllBindingContexts, doc);

错误：

Uncaught TypeError: Cannot call method 'createChildContext' of undefined
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2864
getDocDescriptionbindings.js:627
ko.bindingHandlers.rankeddoc.updatebindings.js:667
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
ko.renderTemplateForEach.activateBindingsCallbackknockout-2.0.0.debug.js:2794
ko.utils.setDomNodeChildrenFromArrayMappingknockout-2.0.0.debug.js:3100
ko.renderTemplateForEach.ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:2809
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateForEachknockout-2.0.0.debug.js:2799
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2859
ko.bindingHandlers.foreach.updateknockout-2.0.0.debug.js:2452
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.bindingHandlers.with.updateknockout-2.0.0.debug.js:2390
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
ko.renderTemplateForEach.activateBindingsCallbackknockout-2.0.0.debug.js:2794
ko.utils.setDomNodeChildrenFromArrayMappingknockout-2.0.0.debug.js:3100
ko.renderTemplateForEach.ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:2809
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateForEachknockout-2.0.0.debug.js:2799
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2859
ko.bindingHandlers.foreach.updateknockout-2.0.0.debug.js:2452
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.bindingHandlers.with.updateknockout-2.0.0.debug.js:2390
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
applyBindingsToDescendantsInternalknockout-2.0.0.debug.js:1755
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1776
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.bindingHandlers.with.updateknockout-2.0.0.debug.js:2390
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
applyBindingsToNodeInternalknockout-2.0.0.debug.js:1855
applyBindingsToNodeAndDescendantsInternalknockout-2.0.0.debug.js:1773
ko.applyBindingsknockout-2.0.0.debug.js:1887
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2700
invokeForEachNodeOrCommentInParentknockout-2.0.0.debug.js:2682
ko.activateBindingsOnTemplateRenderedNodesknockout-2.0.0.debug.js:2699
executeTemplateknockout-2.0.0.debug.js:2739
ko.renderTemplate.ko.dependentObservable.disposeWhenknockout-2.0.0.debug.js:2769
evaluateInitialknockout-deferred-updates.js:241
newComputedknockout-deferred-updates.js:281
ko.renderTemplateknockout-2.0.0.debug.js:2759
ko.bindingHandlers.template.updateknockout-2.0.0.debug.js:2866
ko.bindingHandlers.with.updateknockout-2.0.0.debug.js:2390
ko.dependentObservable.disposeWhenNodeIsRemovedknockout-2.0.0.debug.js:1848
evaluateImmediateknockout-deferred-updates.js:225
evaluatePossiblyAsyncknockout-deferred-updates.js:200
ko.subscribable.fn.notifySubscribersknockout-2.0.0.debug.js:809
ko.utils.arrayForEachknockout-2.0.0.debug.js:60
ko.subscribable.fn.notifySubscribersknockout-2.0.0.debug.js:805
ko.observable.observable.valueHasMutatedknockout-2.0.0.debug.js:882
observableknockout-2.0.0.debug.js:871
selectViewquerium.js:694
Array.eachquerium.js:108
selectViewquerium.js:691
PaginatedView.selectSummaryViewModel.js:35
ko.bindingHandlers.event.initknockout-2.0.0.debug.js:1949
c.event.handlejquery-1.4.2.min.js:55
c.event.add.j.handle.o

我需要做什么才能正确触发模板？

谢谢，

基因

更新2012年3月9日，太平洋标准时间1:52：

我实现了@madcapnmckay建议的解决方案，如下所示：

    ko.renderTemplate('assessmentControls', doc, {}, $assessments, "replaceNode");

现在我从模板中得到一个错误（这是进展！）：

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: $parent is not defined;
Bindings value: assessment: 'REL', css: {selected: isRelevant}, button:{text: false, primary: 'assessment REL'}, filters: $parent.filters

有问题的模板如下所示：

<script id="assessmentControls" type="text/html">
    <div class="block docicons">
        <button title="Save document" 
            style="margin-top: 10px" 
            data-bind="assessment: 'REL', css: {selected: isRelevant}, button:{text: false, primary: 'assessment REL'}, filters: $parent.filters"></button> 
        <button title="Skip in future results" 
            data-bind="assessment: 'NOT_REL', css: {selected: isNotRelevant}, button:{text: false, primary: 'assessment NOT_REL'}, filters: $parent.filters"></button>
    </div>
</script>

所以现在问题是如何指定父模板以使模板按预期运行。

更新2012年3月9日下午5:35：

添加了jsfiddle来说明上述错误。

1 个答案:

答案 0 :(得分：4)

要从绑定中呈现模板，您可以使用ko.renderTemplate方法。

ko.renderTemplate(template, dataOrBindingContext, options, 
    targetNodeOrNodeArray, renderMode)

e.g 

ko.renderTemplate("contextMenuTemplate", config, 
    { templateEngine: templateEngine }, menuContainer, "replaceNode");

希望这有帮助。

修改

正如John Earls在评论中所说。您可以将绑定数据或bindingContext传递给方法。模板绑定到您传入的任何内容。如果您希望访问$ parent等，则由您创建该上下文。

相关问题
最新问题