2013-04-26 45 views
0

我试图在kendo网格中获取事件回调。我的同事已经开始使用MVC助手创建网格。所以我想绑定到这样的网格:在kendo网格上绑定函数回调

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()是不确定的。所以我不确定在网格填充数据之后绑定到剑道网格中的一行的最佳方式是什么。它现在正在呈现服务器端,我正在尝试对DataBound事件进行函数回调,但遇到一些麻烦。有什么想法吗?提前致谢。

回答

2

阻止事情按照你想要的方式工作的一个大问题是你正在将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函数中。相反,您希望将该功能放置在可从整个应用程序访问的地方。

为了简单起见,现在,我建议你只要把函数直接在你的剃须刀页面,在<script>标签:

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

没有必要有任何相关的任何剃刀语法。这只是普通的HTML和嵌入在页面中的JavaScript。

一旦你有了这个,你可以直接提供“handleChecked”功能名到您events.DataBound函数调用:


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

现在,该功能可在页面的任何地方,人们会发现,当“DataBound”事件触发。

希望有所帮助。