javascript - 将函数回调绑定(bind)到kendo网格上

Question

我正在尝试获取剑道网格中事件的回调。我的同事已经开始使用 MVC 助手创建网格。所以我尝试像这样绑定(bind)到网格:

Html.Kendo().Grid<DetailViewModel>()
        .Name("details")
        .Events(events => events.DataBound(@<text>function () {
                                            $('input:checkbox.details-checkbox').click(function () {
                console.log("checked");
                handleChecked();
             });
           }</text>))

所以看文档，我不知道为什么我必须在这里使用@标签。我想我可以输入回调的名称，例如“handleChecked”。但这对我来说不起作用。所以我把它包裹在@标签中。因此，按照当前的设置方式，它确实会将“已检查”文本发送到控制台。然而，我实际上希望在点击复选框时调用一个方法。我宁愿不必将它放在该功能 block 中，因为它会变得困惑。所以我尝试做的是在文档准备好后，定义handleChecked。看起来像:

@{
Html.Telerik().ScriptRegistrar()
    .Scripts(wa => wa.AddSharedGroup(@Url.AssetName(AssetGroups.SinglePageApps)))
    .OnDocumentReady(
        @<text>
             $(document).ready(function () {

                          function handleChecked() {
                console.log("handle checked");
             }
             console.log("document.ready");
             });

         </text>);
}

因此，当我尝试运行它并单击复选框时，我得到handleChecked() is undefined。因此，我不确定在网格填充数据后绑定(bind)到剑道网格中的行的最佳方法是什么。它现在正在服务器端渲染，我正在尝试将函数回调放入 DataBound 事件，但遇到了一些麻烦。有什么想法吗？提前致谢。

Answer 1

阻止事情按照您想要的方式工作的一个大问题是您将 JavaScript 函数包装在 DOMReady 函数中。

在 JavaScript 中，函数定义作用域 - 这意味着在另一个函数中定义的任何变量或函数只会存在于外部函数中。

例如:

function foo(){
  function bar(){ console.log("bar"); }
  bar();
}

foo(); // => logs "bar" to the console
bar(); // fails; bar is undefined / not a function

当我打电话foo()时在其底部， foo 函数定义了一个嵌套 bar函数，然后调用该函数。当我调用bar()时但在那之后，它失败了。这是因为bar仅存在于foo()内功能。尽快foo函数退出，bar超出范围，不再可用。

鉴于此，您不想包装 handleChecked DOMReady 函数内部的函数。相反，您希望将该函数放置在整个应用程序都可以访问的位置。

为了暂时简单起见，我建议您直接将该函数放入 Razor 页面中的 <script> 中。标签:

<script type="javascript">
  function handleChecked(){
    // ... do stuff here ...
  }
</script>

不需要任何 Razor 语法来解决这个问题。这只是嵌入在页面中的普通 HTML 和 JavaScript。

一旦你有了这个，你可以将“handleChecked”函数名称直接提供给你的 events.DataBound函数调用:

  // ...
  .Events(events => events.DataBound("handleChecked"))
  // ...

现在该函数可以从页面中的任何位置使用，当“DataBound”事件触发时就会找到它。

希望有帮助。