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

Question

我使用下面的代码收到“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>

Answer 1

在您的 flawTemplate 内部，范围是 caseStudy.selectedCase.Flaws，因此当您放置 caseStudy.showFlawDetails 时，不会发现它是缺陷或全球性的。

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

否则，一个好的选择是通过 templateOptions 传递函数。因此，您可以这样做：

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

然后，您将使用 $item.showFlawDetails 访问它。

单击（和事件）绑定还期望您向其传递对函数的引用。在您的情况下，您将向其传递执行该函数的结果。在这里进一步回答：knockout.js 调用 click 即使当jquery 模板已渲染