javascript - Win 8 应用程序开发 : How does this tutorial code work?

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

刚刚开始学习 Win 8 应用程序开发，我正在遵循数据绑定(bind)的基本教程。

我试图理解的代码是:

<div id="basicBinding">
          Welcome,
          <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

<script type="text/javascript">
var person = { name: "Fran" };
var personDiv = document.getElementById("nameSpan");
WinJS.Binding.processAll(personDiv, person);

我的理解如下，如有错误请见谅。

脚本中的第一行创建一个名为“person”的变量，它是一个对象文字，在其中我们存储了名称数据。

第二行创建变量“personalDiv”，它存储已绑定(bind)到 HTML span 元素“nameSpan”的数据。

脚本的第三行实际上处理第一行和第二行，以便变量可用于代码的其余部分。

我不明白的是，span 元素实际上是如何输出 Fran 的“name”值的。我不太清楚究竟发生了什么，允许“data-win-bind”调用识别“person”变量并检索名称数据。 'personDiv' 变量似乎尝试在 nameSpan 具有值之前从 'nameSpan' 检索值(这显然是我错误地解释了它，但我看不到正确的逻辑。

我确信我已经将其复杂化了一百万次，因为它是初学者教程，但任何帮助将不胜感激!

谢谢!

Answer 1

data-win-bind 只是一个普通的属性；它实际上没有做任何事情。

当您调用 WinJS.Binding.processAll() 时，它会查找具有该属性的所有元素并处理它们。