有人能解释一下这行JavaScript代码吗?

3

我正在使用DynaTree JavaScript树,并对其进行修改。具体来说,我正在尝试添加多个与节点类型相关的上下文菜单。

基本上,我的想法是让上下文菜单触发一个ajax请求到我的MVC(2)控制器,并且它将传递这个信息作为JSON,其中它将被用来创建一个可以在c#中访问的类。

经过阅读大约500篇帖子,我已经成功地实现了这一点!现在我需要再次修改JS,以便根据类型选择适当的上下文菜单。

我的列表如下:

<div id="tree">
    <ul>

      <li id="'ID':1,'TYPE':1" title="Look: a tool tip!">item1 with key and tooltip</li>
      <li id="'ID':2,'TYPE':2" class="activate">item2: activated on init</li>
      <li id="'ID':3,'TYPE':3" class="folder">Folder with some children
        <ul>
          <li id="'ID':4,'TYPE':1">Sub-item 3.1</li>
          <li id="'ID':5,'TYPE':1">Sub-item 3.2</li>
        </ul>
      </li>
      <li id="'ID':6,'TYPE':1" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="'ID':7,'TYPE':1'">Sub-item 4.1</li>
          <li id="'ID':8,'TYPE':1'">Sub-item 4.2</li>
        </ul>
        </li>
      <li id="'ID':9,'TYPE':1" class="lazy folder">Lazy folder</li>
    </ul>
  </div>

我返回ID并使用jQuery.parseJSON发送到MVC。

这里是我不理解的JS代码:

function bindContextMenu(span) {
    // Add context menu to this node:
    debugger;

    $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) {
      var node = $.ui.dynatree.getNode(el).toString();
      node = node.replace(/'/g, '\"');
      node = jQuery.parseJSON('{' + node + '}');

      $.ajax({
        type: "POST",
        url: "/TreeView/Click/",
        data: { ID: node.ID, TYPE: node.TYPE },
        error: function (request) { $("#message").html("error"); },
        success: function (result) { $("#message").html("Success - " + result); }
      })
    });
  };

这行代码 - $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) {

似乎既设置了上下文菜单,也在上下文菜单被点击时触发。如果有人能提供一些关键词给Google搜索,我会很高兴的,因为我自己也不知道。

提前致谢


顺便说一句:我不是100%确定你的意图,但看起来你是在说每次用户点击这些树形项目时,你都会进行一个AJAX调用以获取该项目的上下文菜单?除非你真的需要每个项目的上下文菜单都不同,否则我建议将上下文菜单的代码嵌入页面中,并使用一些粘合JavaScript显示它;否则用户每次尝试执行普通的UI操作-打开上下文菜单时,都会被卡住等待你的服务器响应,更不用提对你的服务器造成的负载了。 - Brenton Fletcher
嗨,bloopletech,抱歉我没有表达清楚。上下文菜单保存在三个在 HTML 中硬编码的列表中。AJAX 部分将在幕后执行与上下文相关的数据库操作 - 即删除上下文单击将会去删除某些东西。 - DavidB
但是我的问题基本上是:$(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) { 关键字function出现了,但没有给出函数名。据我所知,这是不可能的,这是什么,我该搜索什么? - DavidB
1
哦,那是一个“匿名函数”;你正在声明该函数,然后将该函数作为contextMenu函数的参数传递。 - Brenton Fletcher
再次感谢,这将是真正的帮助。 - DavidB
1个回答

3

.contextMenu 看起来像是一个插件,但是如果不知道具体是哪个插件,很难给出明确的答案。不过看起来初始化该插件需要两个参数:

  1. 包含任何设置参数的 object - 这对于插件来说非常标准
  2. 在菜单被激活时调用的函数(可能)。

谢谢Jamie,我太专注于dyna tree了,忘记它使用另一个插件了。我现在会去看一下。顺便问一下,有人说这可能是JavaScript闭包,值得搜索一下吗,还是方向错了? - DavidB
@DavidBattersby 这不是闭包,但你可能还是想要搜索一下这个词汇,因为它是一个有用的知识点 ;) - Jamiec
1
你所看到的(一个没有名称的函数)是一个“匿名函数”。这里有一个关于JavaScript函数(和闭包)的好详细答案:https://dev59.com/AnM_5IYBdhLWcg3w-4nw - Jamiec
非常感谢 - 我实际上在查看这个链接时回到了这里。 - DavidB

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接