使用代码 nstelerik 在 NativeScript in Action 上节省 50% 的费用。

作为开发者，你经常会学习新框架的来龙去脉。这可能是为了工作、家庭，甚至只是为了乐趣... 因为，为什么不呢？对吧？虽然不同，但大多数框架从远处看起来都一样，提供了三个与 UI 相关的核心功能：UI 定义、获取数据以及将两者结合在一起。NativeScript 也不例外 - 你用 XML 定义 UI，你通过编写 JavaScript 代码获取数据，NativeScript 的数据绑定系统和可观察对象使它们协同工作。

这篇文章摘自 NativeScript in Action，这是一本我们正在撰写的关于使用 NativeScript 开发原生移动应用程序的书籍。我们将教你如何编写更少的代码，并使用数据绑定使你的应用程序更加动态。

为什么你需要动态 UI？

自从互联网诞生以来，我们就了解了动态 UI 的重要性：没有它们，我们不得不求助于网页上的大量文本数据。而当数据需要改变时，我们必须手动更新它。如果我们很幸运，我们只有一份数据副本，但在大多数情况下，存在多个副本。解决这个问题的方法是将数据集中存储起来，并对 UI 进行编程，使其从中央位置提取数据，动态地改变 UI 显示的内容。

NativeScript in action 带你踏上从静态 UI 到动态 UI 的旅程。在本书的前半部分，你将学习如何通过创建 Tekmo 应用程序来创建静态 UI，这是一个为 Tekmo 公司提供移动店面的应用程序，Tekmo 公司将复古视频游戏出售给爱好者。（如果你想了解更多关于 Tekmo 应用程序的信息，请查看我们之前的文章。）

看看 Tekmo 应用程序的产品页面。虽然很难看出来，但 UI 是静态的，并且是硬编码的

Tekmo 应用程序的产品页面，显示了几个硬编码的产品。

每个产品都在产品页面的 XML 文件中进行了硬编码。是的，只有 6 个产品，但如果产品有几十个呢？更重要的是，如果产品经常变化怎么办？更新硬编码的 UI 元素会很快变得很麻烦。此外，我们还必须重新部署应用程序，才能让用户获得更新的版本！

让我们采用不同的方法：想象一下，我们从文件、数据库或公开可访问的 API 端点中提取了 Tekmo 应用程序的产品列表？在检索到这些数据后，我们可以使用检索到的数据更新产品列表。这将使我们能够编写更少的代码，并且我们的应用程序将更加动态，因为我们不再对所有内容进行硬编码。那么，我们如何编写更少的代码，同时仍然允许用户使用自己的剪贴簿创建多个页面呢？这可能并不明显，但我们将使用模板来实现这一点。

模板是一种创建页面 UI 元素结构的方式，无需添加实际显示的文本或图像数据。模板创建后，模板中的 UI 元素将充当屏幕上显示的实际元素的占位符。

通往更加动态 UI 的旅程

让我们暂时搁置 Tekmo 应用程序，访问我们将在 NativeScript in Action 中构建的第二个应用程序：Pet Scrapbook。Pet Scrapbook 允许用户通过创建虚拟剪贴簿页面来捕捉他们宠物生活中的欢乐时刻，这些页面上充满了图片和标题。

在 Pet Scrapbook 中，创建表示单个剪贴簿页面结构的模板是有意义的。该模板将包含宠物姓名、年龄、页面标题、图像和标题的占位符。你可能仍然想知道这将如何节省你的时间，并让你编写更少的代码。让我们在真实剪贴簿的背景下思考一下。想象一下，你正在创建一本实体剪贴簿，并且想要在书中添加一个页面。你拿出一张彩色纸，然后开始整理页面：测量并使用尺子确保项目对齐、笔直，并像剪贴簿中的其他页面一样排列。你对添加的每一张图片、贴纸和文字都这样做。这听起来很耗时，但如果你从模板开始怎么办：一个已经排版好的页面，其中包含页面的标题、你的宠物的姓名、图片和其他设计元素的占位符？突然之间，添加新页面变得容易多了，因为繁重的工作已经完成，你只需要担心页面的内容了。

在我们的应用程序中使用模板就像在真实的剪贴簿中使用模板一样。当你在 NativeScript Pet Scrapbook 中添加新页面时，你将能够使用相同的模板，但显示不同的详细信息。因为我们正在重复使用同一个模板，所以我们也会重复使用为该页面编写的代码。

让我们看看模板概念可以在 Pet Scrapbook 应用程序的背景下应用到哪里。下面是 Pet Scrapbook 的示例图片。在屏幕的左侧有一个剪贴簿页面的列表，右侧显示了当用户在左侧选择页面时页面的详细信息。

Pet Scrapbook 应用程序的示例页面。

对左侧列表视图使用模板是有意义的 - 当添加页面时，我们可以重复使用该模板，并填充宠物图片和宠物名字的空间。右侧的详细信息视图也是一个很好的模板候选者。当用户在左侧选择不同的页面时，可以使用模板填充宠物的姓名、出生日期等。

数据绑定

现在你已经了解了模板，我们想要向你介绍如何重复使用单个 UI 模板来显示不同的详细信息。用于执行此操作的底层技术称为数据绑定。

数据绑定是将 UI 元素链接到代码中对象的流程。当对与代码中对象或属性链接的 UI 元素进行更改时，更改将反映在对象或属性中。与代码中对象链接的 UI 元素被称为数据绑定的。

数据绑定是将 JavaScript 对象和 UI 元素链接在一起的整个流程的名称。数据绑定很重要，因为它解决了在 Tekmo 应用程序的产品页面中硬编码产品或根据用户输入的生日更新 Pet Scrapbook 应用程序上的年龄字段的问题。在我们更深入地研究数据绑定的使用之前，让我们学习另一个推动数据绑定内部工作机制的概念：可观察对象。

可观察对象是特殊的 JavaScript 对象，它们在其中一个值发生更改时向你的代码提供通知。

我们喜欢将可观察对象比作教室里的孩子：每当发生变化时，他们都会举手告诉老师。这可能是流鼻涕、需要上厕所，或者想向老师展示他们画的酷炫机器人图片。发生什么变化并不重要，但每当发生变化时，他们都会举手，确保老师知道这件事。孩子们就像可观察对象（也称为可观察对象），只是可观察对象不会举手，而是会触发事件。图 3 显示了当可观察对象的一个内部值发生更改时，可观察对象如何触发事件。在 Pet Scrapbook 的背景下，我们可能有一个可观察对象来跟踪我们宠物的姓名和出生日期。

你的应用程序可以在可观察对象的一个内部值发生更改时对该对象做出响应。

在这一点上，你可能想知道这如何联系在一起。模板、数据绑定、可观察对象、事件（我的天哪）！这些概念共同构成了我们将用来解决硬编码问题的基础。图 4 显示了这四个概念之间的关系。

数据绑定、模板、可观察对象和可观察对象更改事件之间的关系。

数据绑定描述了将 UI 模板和可观察对象链接在一起的行为。一旦链接在一起，模板就会监听可观察对象触发的更改事件。当可观察对象的某个值发生变化时，就会触发一个事件。注册的事件监听器然后会对可观察对象的更改做出响应，显示可观察对象的新值。

就是这样！现在你已经看到了一个关于如何使用数据绑定来跟踪宠物的姓名和出生日期的简单示例。因此，如果你对数据绑定及其工作原理感兴趣，或者你想要知道一只猫是如何在 Pet Scrapbook 中得到一个百吉圈的，请查看NativeScript in Action 的免费第一章，并查看此Slideshare 演示文稿。

别忘了使用代码 nstelerik 在 NativeScript in Action 上节省 50% 的费用。