如何设计 XPages JS 函数以在库中使用？

Question

创建 XPages 应用程序，代替用户填写简单的 Excel 并将其邮寄给用户。

首先我在表单上有两个编辑框，Hours10 和 Hours20。

希望将输入到 Hours20 的值也转到 Hours10。

当我在 Hours20 编辑框的 onChange 事件中有此代码时

var hours20 = XSP.getElementById("#{id:Hours20}").value; 
XSP.getElementById("#{id:Hours10}").value = hours20; 

它可以工作，并且 Hours10 编辑框会更新为 Hours20 中的值。

当我将代码移动到保存在客户端 javascript 库中的函数中时：

function updateHours() {
  var hours20 = XSP.getElementById("#{id:Hours20}").value; 
  XSP.getElementById("#{id:Hours10}").value = hours20; 
}

并从 Hours20 编辑框的 onChange 事件中调用它：updateHours();

它不起作用。在 XSP 对象上给我一个找不到对象的错误。

不知道为什么会出错 - 我猜 XSP 不再在 Scope 中？

有什么想法或解决方法吗？

Answer 1

表达式语言（例如#{id:Hours20}）只能在组件属性的上下文中进行解释，例如字段的onChange 事件代码。一旦将代码移到单独的库中，代码就不再是组件的属性，而是可以在组件属性中引用的代码。

与任何其他好的函数一样，设计所有客户端 JavaScript 函数以接受任何可能与上下文相关的参数作为参数。例如：

function updateHours(inputId, outputId) {
  var hours20 = XSP.getElementById(inputId).value; 
  XSP.getElementById(outputId).value = hours20; 
}

那么你的onChange事件可以引用这个函数，但是只传入上下文相关的信息：

updateHours("#{id:Hours20}", "#{id:Hours10}");

通过这种方式，您可以在脚本库中保留可重用的业务逻辑，这始终是一件好事，但这些库中的任何内容都不会假设页面结构或服务器端变量。