哪个JavaScript代码实现了闪亮的numericInput小部件?

Jos*_*ien 5 javascript jquery r shiny

打电话给numericInput(),像这样:

numericInput("obs", "Observations:", 10, min = 1, max = 100)
Run Code Online (Sandbox Code Playgroud)

像这样构造HTML代码:

<div class="form-group shiny-input-container">
  <label for="obs">Observations:</label>
  <input id="obs" type="number" class="form-control" value="10" min="1" max="100"/>
</div> 
Run Code Online (Sandbox Code Playgroud)

然后,据推测,在浏览器中,HTML doc的标题中包含的一个脚本提供的JavaScript代码会找到该<input>元素并使用下面显示的交互式窗口小部件呈现它:

在此输入图像描述

但是,我很难过,找出找到该<input>元素然后触发生成相应小部件的代码的位置.它是在Shiny自己的JavaScript中,还是借助于Bootstrap或jQuery UI或其他随附闪亮的插件

我的问题:

JavaScript代码在哪里提供上面描绘的小部件并将其与HTML <input>元素相关联?从我所涉及的代码中,我可以如何自己学习?


更多可能只是有用的细节

脚本的这一部分"shiny.js"找到<input>感兴趣的元素,并提供可以获取和设置窗口小部件值的方法.它(我可以看到)并不提供小部件本身.

var numberInputBinding = {};
$.extend(numberInputBinding, textInputBinding, {
  find: function(scope) {
    return $(scope).find('input[type="number"]');
  },
  getValue: function(el) {
    var numberVal = $(el).val();
    if (/^\s*$/.test(numberVal))  // Return null if all whitespace
      return null;
    else if (!isNaN(numberVal))   // If valid Javascript number string, coerce to number
      return +numberVal;
    else
      return numberVal;           // If other string like "1e6", send it unchanged
  },
  setValue: function(el, value) {
    el.value = value;

  [... snip ...]

  }
});
inputBindings.register(numberInputBinding, 'shiny.numberInput');
Run Code Online (Sandbox Code Playgroud)

这里是闪亮生成的HTML文件的<head>一部分的副本,它导致了小部件.它引用的脚本大多可以在这里找到numericInput

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.12.2];bootstrap[3.3.1]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
  <title>Hello Shiny!</title>
</head>
Run Code Online (Sandbox Code Playgroud)

Jos*_*ien 2

这是一个错误的假设,使我很难弄清楚:

然后,据推测,在浏览器中,HTML 文档标头中包含的脚本之一提供的JavaScript 代码会找到该元素并使用下面显示的交互式小部件来呈现它:

事实上,正如 @epascarello 指出的那样,现代浏览器本身支持<input type="number">. (有关这一事实的更多文档,以及通过将 JavaScript 合并到这些现代 Web 浏览器中而启用的功能的长列表,请参阅“Web 设计者的 HTML”的第 4 章。)