Question

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

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

所以看一下文档，我不知道为什么我必须在这里使用@标签。我想我可以直接输入我的回调名称，比如“handleChecked”。这对我来说不起作用。所以我把它包装在@标签中。因此，它当前的设置方式，它确实将“已检查”文本提供给控制台。但是，我实际上想要在复选框被调用时调用方法。我宁愿不必把它放在那个功能块中，因为它会变得混乱。所以我尝试做的就是准备文件，定义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（）未定义。所以我不确定在网格填充数据后绑定到kendo网格中的行的最佳方法是什么。它现在正在渲染服务器端，我试图将函数回调放到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。

完成此操作后，您可以直接向events.DataBound函数调用提供“handleChecked”函数名称：


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

现在该功能可以从页面的任何位置获得，它将在“DataBound”事件触发时找到。

希望有所帮助。

绑定函数回调到kendo网格

1 个答案: