logo标签列表

哪段JavaScript代码实现了shiny的numericInput小部件？

javascriptjqueryrshiny
5

调用numericInput()，像这样:

numericInput("obs", "Observations:", 10, min = 1, max = 100)

构建的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>

那么，在浏览器中，由HTML文档头部包含的脚本之一提供的JavaScript代码会查找<input>元素并显示下面的交互式小部件：enter image description here 然而，我很难弄清楚在哪里存储了查找<input>元素并触发相应小部件生产的代码。它是在Shiny自己的JavaScript中还是在从Bootstrap或jQuery UI或其他与shiny一起提供的插件借用的JavaScript中？ 我的问题是：提供上面图片所示的小部件并将其与HTML<input>元素相关联的JavaScript代码位于何处？从涉及到的代码中，我应该如何自行了解这一点呢？更可能有用的细节请看此处的脚本"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');

以下是生成 numericInput 小部件的 shiny HTML 文件中 <head> 部分的副本。它所引用的脚本大多可以在这里找到。

<!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>
就我所知，这个小部件看起来有点像由jQuery UI插件提供的Spinner，但是我无论如何都找不到在相关的shiny代码库中引用/链接该小部件的位置。 - Josh O'Brien
2
所有现代浏览器都支持<input type="number">，没有花哨的东西。 - epascarello
@epascarello 哦，有趣，谢谢。这是否意味着没有涉及到 JavaScript？还是说有 JavaScript，但它是浏览器源代码的一部分？ - Josh O'Brien
$(scope).find('input[type="number"]'); 这行代码是用来查找普通数字输入框的。 - charlietfl
1
回答@epascarello的问题，《HTML5网页设计》第4章似乎表明JavaScript被整合到Web浏览器中为像<input type="number">这样的“表单增强”铺平了道路。 - Josh O'Brien
显示剩余2条评论
1个回答
2
以下是我很难理解的错误假设：
在浏览器中，JavaScript代码由HTML文档头中包含的一个脚本提供，然后找到该元素并使用下面显示的交互式小部件进行呈现。
实际上，正如@epascarello所指出的那样，现代浏览器本身支持。 （有关此事实的进一步文档以及这些现代Web浏览器中JavaScript支持的长列表，请参见“面向Web设计师的HTML”的第4章Chapter 4 of "HTML for Web Designers"。）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接