从敲门js绑定中调用模板 [英] calling template from a knockoutjs binding
本文介绍了从敲门js绑定中调用模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在knocoutjs绑定中，我想生成一些HTML并将其转换为一个元素.该HTML与我已经拥有的模板相同.我尝试做显而易见的事情，并从另一个绑定中调用模板绑定，但是出现如下所示的错误.
In a knocoutjs binding, I would like to generate some HTML and it to an element. This HTML is identical to a template I already have. I tried doing the obvious, and calling the template binding from another binding, but I am getting an error as shown below.
我的电话
// 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
我该怎么做才能正确触发模板?
What do I need to do to trigger the template correctly?
谢谢
基因
UPDATE 2012年3月9日，太平洋标准时间1:52:
我实现了@madcapnmckay建议的解决方案，如下所示:
I implemented the solution suggested by @madcapnmckay as follows:
ko.renderTemplate('assessmentControls', doc, {}, $assessments, "replaceNode");
现在从模板中得到一个错误(正在进步！):
and am now getting an error from the template (which is progress!):
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>
所以现在的问题是如何指定父项，以便模板按预期方式运行.
So now the issue is how to specify the parent so that the template behaves as expected.
UPDATE 2012年3月9日下午5:35:
UPDATE 9 Mar 2012 5:35 PM:
添加了 jsfiddle 来说明上述错误.
Added a jsfiddle to illustrate above error.
推荐答案
要在绑定中呈现模板，可以使用ko.renderTemplate方法.
To render a template from within a binding you can use the ko.renderTemplate method.
ko.renderTemplate(template, dataOrBindingContext, options,
targetNodeOrNodeArray, renderMode)
例如
ko.renderTemplate("contextMenuTemplate", config,
{ templateEngine: templateEngine }, menuContainer, "replaceNode");
希望这会有所帮助.
编辑
正如约翰·厄尔斯(John Earls)在评论中所述.您可以将绑定数据或bindingContext传递给方法.模板绑定到您传递的任何内容.如果您希望访问$ parent等，则由您来创建该上下文.
As John Earls stated in the comments. You can pass either binding data or a bindingContext into the method. The template is bound to whatever you pass in. It's up to you to create that context if you wish to have access to $parent etc.
这篇关于从敲门js绑定中调用模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
