Knockout.js 从knockoutjs绑定调用模板

Knockout.js 从knockoutjs绑定调用模板,knockout.js,Knockout.js,在knocoutjs绑定中,我想生成一些HTML并将其添加到元素中。此HTML与我已有的模板相同。我试着做显而易见的事情,并从另一个绑定调用模板绑定,但我得到了一个错误,如下所示 我的电话 // doc is a parameter to the method var $assessments = $('div'); var docfcn = function() { return doc; } var defaultAllBindingContexts = function() { retur

在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");
现在,我从模板中得到一个错误(这就是进度!):

所讨论的模板如下所示:

<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更新:


添加了一个示例来说明上述错误。

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

ko.renderTemplate(template, dataOrBindingContext, options, 
    targetNodeOrNodeArray, renderMode)
e、 g

希望这有帮助

编辑


正如约翰·厄尔斯在评论中所说的那样。可以将绑定数据或bindingContext传递到方法中。模板将绑定到您传入的任何内容。如果希望访问$parent等,则由您创建该上下文。

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

ko.renderTemplate(template, dataOrBindingContext, options, 
    targetNodeOrNodeArray, renderMode)
e、 g

希望这有帮助

编辑


正如约翰·厄尔斯在评论中所说的那样。可以将绑定数据或bindingContext传递到方法中。模板将绑定到您传入的任何内容。如果您希望访问$parent等,请自行创建上下文。

谢谢,这很有帮助。我现在从我的模板中得到一个错误,如更新的问题中所示。你可以添加一个JSFIDLE来演示错误,我们可以看看它是否可以工作。我添加了一个示例JSFIDLE。你需要创建一个子上下文来提供$parent:@Kato-这是可选的,除非你想指定要使用的templateEngine,否则你不需要它。我复制并粘贴了一些KOV1代码。谢谢,这很有帮助。我现在从我的模板中得到一个错误,如更新的问题中所示。你可以添加一个JSFIDLE来演示错误,我们可以看看它是否可以工作。我添加了一个示例JSFIDLE。你需要创建一个子上下文来提供$parent:@Kato-这是可选的,除非你想指定要使用的templateEngine,否则你不需要它。我从一些KO V1代码中复制并粘贴了它。
ko.renderTemplate("contextMenuTemplate", config, 
    { templateEngine: templateEngine }, menuContainer, "replaceNode");