在 Jquery 模板中找不到 knockout.js 和属性答案

【问题标题】：knockout.js and property not being found in Jquery Template在 Jquery 模板中找不到 knockout.js 和属性
【发布时间】：2011-10-24 06:18:54
【问题描述】：

我收到以下代码的“caseStudy 未定义”。我必须添加完整的前缀 app.viewModel.caseStudy.showFlawDetails 才不会出错。

 app.viewModel.caseStudy = {};
        app.viewModel.caseStudy.cases = ko.observableArray();
        app.viewModel.caseStudy.selectedCaseId = ko.observable(0);
        app.viewModel.caseStudy.selectedCase = ko.mapping.fromJS(caseModel);
app.viewModel.caseStudy.showFlawDetails = function (index) {
        console.log(index);
    };
ko.applyBindings(app.viewModel);

<div class="Flaws" data-bind='template: { name: "flawTemplate", data: caseStudy.selectedCase.Flaws }'>
    </div>
    <script id="flawTemplate" type="text/html">
        {{each(index, value) $data}}
        <div class="flaw">
        <div class="Title" data-bind="click: caseStudy.showFlawDetails(index)"> ${value.Title} </div>
        <div class="Items">
            <div>Title: <input type="text" data-bind="value: value.Title" /></div>
            <div>Check: <input type="text" data-bind="value: value.Check" /></div>
            <div>Instructor: <input type="text" data-bind="value: value.Instructor" /></div>
            <div>Keys: <input type="text" data-bind="value: value.Keys" /></div>
            <div>Opponent Init: <input type="text" data-bind="value: value.OpponentInit" /></div>
            <div>Opponent Justification: <input type="text" data-bind="value: value.OpponentJustif" /></div>
            <div>Opponent Communication: <input type="text" data-bind="value: value.OpponentComm"/></div>
            <div>Hint: <input type="text" data-bind="value: Hint"/></div>
            <div>Opponent Incorrect Hint: <input type="text" data-bind="value: value.OpponentIncorrectHint"/></div>
            <div>Prompt: <input type="text" data-bind="value: Prompt" /></div>
            <div>PromptCompletion: <input type="text" data-bind="value: value.PromptCompletion"/></div>
            <div>Opponent Incorrect Prompt: <input type="text" data-bind="value: value.OpponentIncorrectPrompt"/></div>
        </div>
        </div>
        {{/each}}
    </script>

【问题讨论】：

标签： jquery knockout.js jquery-templates

【解决方案1】：

在您的flawTemplate 内部，范围是caseStudy.selectedCase.Flaws，因此当您输入caseStudy.showFlawDetails 时，它不会作为Flaws 或全局属性找到。

因此，如果app 具有全局范围（似乎是因为它适合您），您可以使用app.viewModel.caseStudy.showFlawDetails 引用它。

否则，一个不错的选择是通过 templateOptions 传入函数。所以，你会这样做：

data-bind='template: { name: "flawTemplate", data: caseStudy.selectedCase.Flaws, templateOptions: showFlawDetails: caseStudy.showFlawDetails } }'>

然后，您可以使用$item.showFlawDetails 访问它

点击（和事件）绑定还期望您将一个对函数的引用传递给它。在您的情况下，您将执行函数的 result 传递给它。在这里进一步回答：knockout.js calling click even when jquery template is rendered

【讨论】：