Orchard 字段上的多个 Javascript 调用答案

【问题标题】：Multiple Javascript calls on an Orchard fieldOrchard 字段上的多个 Javascript 调用
【发布时间】：2016-06-02 13:58:51
【问题描述】：

我正在创建一个模块，该模块允许用户通过创建一个包含地址的自定义字段来查看一组 IP 地址的状态（并在首次输入时对其进行验证）。在字段视图中，有一个字形图标会根据 ping 尝试的结果而变化。

How it should look

但是，我在获取用于 ping 地址和每个单独字段以正确传递参数的 Javascript 时遇到了困难。由于某种原因，只有第一个字段的地址被传递给 Javascript，而不是使用每个单独字段的地址。

How it looks when only one address gets passed

我用 Firebug 检查了页面，发现 onload 参数被正确收集和发送，但 Javascript 只接收第一个字段的内容。由于 Javascript 使用参数来确定要更改的 DOM，因此只有第一个 DOM 会被更改。

我还通过使 spanIDHolder 和 addressHolder 跨度可见并让 Javascript 警报包含这两个跨度的内容来确认传递的值不正确。 HTML 显示正确的值，但警报只显示第一个值。

这是视图的代码：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
@{
    string ipaddress = Model.ContentField.Value;
    string spanID = ipaddress + "span";
    bool showPingResult = Model.ContentField.ShowPing;
}
<body>
    @{
        if (!string.IsNullOrEmpty(ipaddress)) {
            if (showPingResult) {
                <span id="addressHolder" style="display:none">@ipaddress</span>
                <span id="spanIDHolder" style="display:none">@spanID</span>
                <span id="@spanID">
                    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
                </span>
            }
            <span class="text-field">@ipaddress</span>
        }
    }
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        var address = document.getElementById("addressHolder").innerText;
        var id = document.getElementById("spanIDHolder").innerText;

        function setPingResult() {
            var elem = document.getElementById(id);
            elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
        }

        $(document).ready(function () {
            setPingResult();
        });
    </script>

</body>

在我可以正确传递参数之前，暂时简化了 Javascript，因此未使用“地址”。

到目前为止我尝试过的事情：

包含 Javascript 代码的其他方法，例如内联或将其包含在 HTML 中，如讨论 here
通过 C# 函数执行 ping 并在视图上使用 if 语句来显示正确的符号
- 这可行，但意味着它会在页面加载之前运行 ping 脚本。如果有办法在 onload 块（或等效）中调用 C# 函数，那将是一个解决方案
通过对主体的 onload 调用运行代码并将 Javascript 存储在单独的文件中
随意移动东西，希望它决定工作

如果我需要提供项目其他地方的代码，请告诉我。

编辑：到目前为止我发现的一些东西......

无论页面上有多少个单独的字段，开头指定变量的块只执行一次。我通过用随机数生成器的输出替换 spanID 发现了这一点。所有四个字段都收到相同的随机数。

我尝试将字段封装在零件中，但不知道如何将变量获取到零件视图而不是字段视图。视图模型可能是关键？

只需在所需的变量名前使用@，即可将变量传递到Javascript 部分。这会导致 last 字段的数据被传递。

【问题讨论】：

我认为这是因为 addressHolder 和 spanIDHolder 跨度对于每个字段都有相同的 id。您的 javascript 会被执行四次，每个字段执行一次，但 document.getElementById("addressHolder") 将始终获取页面上具有该 ID 的第一个元素。如果您确保 id 是唯一的，它可能会起作用。我建议您为 Part 而不是 Field 创建一个模板，然后循环遍历其中的所有 span。这样，所有这些代码只会在页面中包含一次。
感谢您的意见！您对this thread 上的信息有任何帮助吗？
据我所知，目前无法精确控制通过迁移添加的字段的位置。不过，这与您的问题并不完全相关。您应该能够在Views/EditorTemplates/Parts/MyPart.cshtml 中为您的角色呈现编辑器，就像这里的示例一样：docs.orchardproject.net/en/latest/Documentation/…

标签： javascript orchardcms

【解决方案1】：

解决方案：

由于某种原因，如果我在 document.ready 块中而不是直接在 JS 函数中收集变量，则传递可以正常工作。因此，而不是

function setPingResult() {
    var elem = document.getElementById('@spanID');
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult();
});

我用

function setPingResult(spanID) {
    var elem = document.getElementById(spanID);
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult('@spanID');
});

如果有人能解释为什么这行得通，那就太好了。

【讨论】：

这是因为当您在 $(document).ready() 之外调用 @spanID 时，它处于全局范围内。这会导致所有 Javascript 实例只查找它们遇到的第一个 spanID 变量。将整个脚本封装在一个自执行的匿名函数中可以解决范围问题。
如果你真的能胜任，你实际上应该使用 Script.Include 标记来执行此操作，然后在页面上具有指定类的所有对象上执行 for 循环，而不是使用 HTML 的 GUID标签。