即使渲染了 jquery 模板，knockout.js 也会调用 click
当模板呈现时，为什么 showFlawDetails 的点击甚至会被触发？
app.viewModel.caseStudy.showFlawDetails = function (index) {
console.log(index);
app.viewModel.caseStudy.selectedFlaw(index);
};
<script id="flawTemplate" type="text/html">
{{each(index, value) $data}}
<div class="flaw">
<div class="Title" data-bind="click: app.viewModel.caseStudy.showFlawDetails(index)"> Flaw: ${value.Title} </div>
<div class="Items" data-bind="visible: app.viewModel.caseStudy.selectedFlaw() == index">
<div>Title: <input type="text" data-bind="value: value.Title" /></div>
<div>Check: <input type="text" data-bind="value: value.Check" /></div>
{{each(index1, value1) value.Details}}
<div>${value1.Key}: <input type="text" data-bind="value: value1.Value" /></div>
{{/each}}
</div>
</div>
{{/each}}
</script>
Why would the click even get fired for showFlawDetails when the template renders?
app.viewModel.caseStudy.showFlawDetails = function (index) {
console.log(index);
app.viewModel.caseStudy.selectedFlaw(index);
};
<script id="flawTemplate" type="text/html">
{{each(index, value) $data}}
<div class="flaw">
<div class="Title" data-bind="click: app.viewModel.caseStudy.showFlawDetails(index)"> Flaw: ${value.Title} </div>
<div class="Items" data-bind="visible: app.viewModel.caseStudy.selectedFlaw() == index">
<div>Title: <input type="text" data-bind="value: value.Title" /></div>
<div>Check: <input type="text" data-bind="value: value.Check" /></div>
{{each(index1, value1) value.Details}}
<div>${value1.Key}: <input type="text" data-bind="value: value1.Value" /></div>
{{/each}}
</div>
</div>
{{/each}}
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
单击（和事件）绑定期望您向其传递对函数的引用，而不是对其的实际评估。
因此，在您的情况下，它尝试将点击事件设置为等于
app.viewModel.caseStudy.ShowFlawDetails(index)的结果。要实现此功能，您需要将其包装在匿名函数中，例如：
click: "function() { app.viewModel.caseStudy.showFlawDetails(index); }"或者如果您不这样做就像匿名函数一样，那么您需要找到一种方法将函数移动到 caseStudy 对象，并在 caseStudy 对象上放置索引，以便您可以直接访问它。如果有帮助，请查看
另外，这里是一个通过订阅其父 observableArray 的更改来维护对象索引属性的示例： http:// /jsfiddle.net/rniemeyer/CXBFN/
The click (and event) bindings expect that you pass it a reference to a function and not the actual evaluation of it.
So, in your case it is trying to set the click event equal to the result of
app.viewModel.caseStudy.ShowFlawDetails(index).To make this work you would either need to wrap it in an anonymous function like:
click: "function() { app.viewModel.caseStudy.showFlawDetails(index); }"or if you don't like the anonymous function, then you would need to find a way to move the function to the caseStudy object and put an index on your caseStudy object, so you can access it directly. If it helps look at the Avoiding anonymous functions in event bindings in this post of mine.
Also, here is a sample of maintaining an index property on an object by subscribing to changes to its parent observableArray: http://jsfiddle.net/rniemeyer/CXBFN/