CN108509395A - 数据绑定方法及装置 - Google Patents

Abstract

本发明提供了一种数据绑定方法及装置，其中，该方法包括：获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；获取属性名称对应的DOM元素；获取数据，并从数据中获取值为属性值的数据字段；将数据字段绑定到DOM元素中。采用上述技术方案，解决了相关技术中数据绑定效率低的问题，提高了数据绑定的效率。

Description

数据绑定方法及装置

技术领域

本发明涉及通信领域，具体而言，涉及一种数据绑定方法及装置。

背景技术

在页面的前端开发的过程中，使用异步JavaScript和可扩展标记语言(Asynchronous JavaScript And XML，简称为AJAX)技术从后端获取数据，经过一定的处理，最终展示在页面中。将数据放到超文本标记语言(HyperText Markup Language，简称为HTML)元素中时，如果不是表单元素，则直接将使用文档对象模型(Document ObjectModel，简称为DOM)元素的文本节点指定为要展示的数据即可，对于表单元素，则需指定value为要展示的数据。实际开发过程中，需要根据实际数据，动态生成DOM元素，并将数据绑定到DOM元素中，例如表格和列表。

在现有的数据绑定的过程中，使用字符串拼接的方式，逐个生成DOM元素，并在生成的过程中绑定数据，最后生成完毕后，将字符串添加到HTML元素的子节点中。当开发大量前端页面时，此种方式效率及其低下，且容易出错，难以调试。

针对相关技术中数据绑定效率低的问题，目前还没有有效地解决方案。

发明内容

本发明实施例提供了一种数据绑定方法及装置，以至少解决相关技术中数据绑定效率低的问题。

根据本发明的一个实施例，提供了一种数据绑定方法，包括：获取HTML元素中的属性信息，其中，所述属性信息包括属性名称和属性值，其中，所述属性名称用于指示待绑定的DOM元素，所述属性值用于指示需要绑定的数据字段；获取所述属性名称对应的DOM元素；获取数据，并从所述数据中获取值为所述属性值的数据字段；将所述数据字段绑定到所述DOM元素中。

可选地，获取HTML元素中的属性信息包括：根据所述HTML元素的标签特性为所述HTML元素指定所述属性信息，得到HTML片段；将所述HTML片段添加到所述HTML元素中。

可选地，在将所述HTML片段添加到所述HTML元素中之后，所述方法还包括：将所述HTML元素的CSS样式配置为隐藏样式。

可选地，将所述数据字段绑定到所述DOM元素中包括：判断所述数据字段的数据类型；根据所述数据类型将所述数据字段绑定到所述DOM元素中。

可选地，根据所述数据类型将所述数据字段绑定到所述DOM元素中包括：在所述数据类型为预设类型的情况下，将所述数据字段绑定到所述DOM元素的TEXT属性，其中，所述预设类型包括以下之一：字符串类型、数字类型、布尔对象类型；在所述数据类型为对象类型的情况下，将所述对象类型数据的所述属性名称对应的属性绑定到所述DOM元素；在所述数据类型为数组类型的情况下，循环所述数组；所述数组中的每个元素以所述DOM元素为模板生成DOM元素集合；将所述DOM元素集合添加到所述属性名称对应的父节点上。

根据本发明的另一个实施例，提供了一种数据绑定装置，包括：第一获取模块，用于获取HTML元素中的属性信息，其中，所述属性信息包括属性名称和属性值，其中，所述属性名称用于指示待绑定的DOM元素，所述属性值用于指示需要绑定的数据字段；第二获取模块，用于获取所述属性名称对应的DOM元素；第三获取模块，用于获取数据，并从所述数据中获取值为所述属性值的数据字段；绑定模块，用于将所述数据字段绑定到所述DOM元素中。

可选地，所述第一获取模块包括：处理单元，用于根据所述HTML元素的标签特性为所述HTML元素指定所述属性信息，得到HTML片段；添加单元，用于将所述HTML片段添加到所述HTML元素中。

可选地，所述装置还包括：配置模块，用于将所述HTML元素的CSS样式配置为隐藏样式。

可选地，所述绑定模块包括：判断单元，用于判断所述数据字段的数据类型；绑定单元，用于根据所述数据类型将所述数据字段绑定到所述DOM元素中。

可选地，所述绑定单元用于：在所述数据类型为预设类型的情况下，将所述数据字段绑定到所述DOM元素的TEXT属性，其中，所述预设类型包括以下之一：字符串类型、数字类型、布尔对象类型；在所述数据类型为对象类型的情况下，将所述对象类型数据的所述属性名称对应的属性绑定到所述DOM元素；在所述数据类型为数组类型的情况下，循环所述数组；所述数组中的每个元素以所述DOM元素为模板生成DOM元素集合；将所述DOM元素集合添加到所述属性名称对应的父节点上。

通过本发明，获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；获取属性名称对应的DOM元素；获取数据，并从数据中获取值为属性值的数据字段；将数据字段绑定到DOM元素中，由此可见，采用上述方案为HTML元素指定其需要绑定的数据字段，根据获取到的HTML元素中的属性信息获取对应的DOM元素，自动地将获取的数据绑定到对应的DOM中，避免了逐一生成DOM元素的复杂过程，因此，提高了数据绑定的效率，从而解决了相关技术中数据绑定效率低的问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种数据绑定方法的流程图；

图2是根据本发明实施例的一种数据绑定装置的结构框图一；

图3是根据本发明实施例的一种数据绑定装置的结构框图二；

图4是根据本发明实施例的一种数据绑定装置的结构框图三；

图5是根据本发明实施例的一种数据绑定装置的结构框图四。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

实施例1

在本实施例中提供了一种数据绑定方法，图1是根据本发明实施例的一种数据绑定方法的流程图，如图1所示，该流程包括如下步骤：

步骤S102，获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；

步骤S104，获取属性名称对应的DOM元素；

步骤S106，获取数据，并从数据中获取值为属性值的数据字段；

步骤S108，将数据字段绑定到DOM元素中。

可选地，上述数据绑定方法可以但不限于应用于网页开发的场景中。例如：网页开发时前端数据绑定的场景等等。

通过上述步骤，获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；获取属性名称对应的DOM元素；获取数据，并从数据中获取值为属性值的数据字段；将数据字段绑定到DOM元素中，由此可见，采用上述方案为HTML元素指定其需要绑定的数据字段，根据获取到的HTML元素中的属性信息获取对应的DOM元素，从而自动地将从后端获取的数据字段绑定到对应的DOM元素中，避免了为获取到的数据逐一生成DOM元素再进行数据绑定的复杂过程，因此，提高了数据绑定的效率，从而解决了相关技术中数据绑定效率低的问题。

可选地，在本实施例中，可以但不限于从后端数据库中获取待绑定的数据，并根据获取的数据中的数据字段的值将获取的数据绑定到属性名称对应的DOM元素中。

可选地，在上述步骤S102中，可以根据HTML元素的标签特性为HTML元素指定属性信息，并将HTML片段添加到HTML元素中。例如：HTML元素的标签特性可以但不限于为attribute，可以使用attribute的形式为HTML元素指定需要绑定的数据字段，得到HTML片段，并将HTML片段添加到HTML元素中。

在一个示例中，为HTML元素指定用于指示待绑定的DOM元素的属性名称为“property”，用于指示需要绑定的数据字段的属性值为“propertyName”，那么，可以使用如下代码为HTML元素指定属性信息：<span property＝"propertyName"></span>，从上述代码可以看出，attribute property指定了绑定的数据字段名称是propertyName。

可选地，在将HTML片段添加到HTML元素中之后，可以将该HTML元素设置为隐藏，即为该HTML元素设置指定的CSS样式。例如：将HTML元素的CSS样式配置为隐藏样式。CSS样式是可以用于设置HTML或者XML文件样式的属性，也就是说，在本实施例中，可以通过设置HTML元素的CSS样式将该HTML片段隐藏起来，从而使得该HTML片段不会影响到该HTML元素在前端的显示情况。

根据上述示例，在上述步骤S104中，可以获取属性名称“property”对应的DOM元素。在上述步骤S106中，可以在获取的数据中查找属性值为“propertyName”对应的数据字段。

可选地，在上述步骤S108中，可以但不限于根据数据字段的数据类型为HTML元素绑定数据。例如：判断数据字段的数据类型，再根据数据类型将数据字段绑定到DOM元素中。

可选地，上述数据类型可以但不限于包括：预设类型、对象类型和数组类型，其中，预设类型包括以下之一：字符串类型、数字类型、布尔对象类型。

在本实施例中，可以根据不同的数据类型通过不同的方式为HTML元素绑定数据。

例如：在数据类型为预设类型的情况下，将数据字段绑定到DOM元素的TEXT属性。

在数据类型为对象类型的情况下，将对象类型数据的属性名称对应的属性绑定到DOM元素。

在上述示例中，如果数据类型为对象类型，则将对象类型数据的属性值设置成object.property，表示此DOM元素绑定的是object对象的property属性。

在数据类型为数组类型的情况下，循环数组；数组中的每个元素以DOM元素为模板生成DOM元素集合；将DOM元素集合添加到属性名称对应的父节点上。

在上述示例中，如果数据类型为数组，则可以循环数组，数组中的每个元素都根据dom元素为模板生成一个新的dom元素，得到DOM元素集合，再将这些新的dom元素添加到propertype属性的父节点上。

实施例2

在本实施例中还提供了一种数据绑定装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图2是根据本发明实施例的一种数据绑定装置的结构框图一，如图2所示，该装置包括：

第一获取模块22，用于获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；

第二获取模块24，耦合至第一获取模块22，用于获取属性名称对应的DOM元素；

第三获取模块26，耦合至第二获取模块24，用于获取数据，并从数据中获取值为属性值的数据字段；

绑定模块28，耦合至第三获取模块26，用于将数据字段绑定到DOM元素中。

可选地，上述数据绑定装置可以但不限于应用于网页开发的场景中。例如：网页开发时前端数据绑定的场景等等。

通过上述装置，第一获取模块获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；第二获取模块获取属性名称对应的DOM元素；第三获取模块获取数据，并从数据中获取值为属性值的数据字段；绑定模块将数据字段绑定到DOM元素中，由此可见，采用上述方案为HTML元素指定其需要绑定的数据字段，根据获取到的HTML元素中的属性信息获取对应的DOM元素，从而自动地将从后端获取的数据字段绑定到对应的DOM元素中，避免了为获取到的数据逐一生成DOM元素再进行数据绑定的复杂过程，因此，提高了数据绑定的效率，从而解决了相关技术中数据绑定效率低的问题。

可选地，在本实施例中，可以但不限于从后端数据库中获取待绑定的数据，并根据获取的数据中的数据字段的值将获取的数据绑定到属性名称对应的DOM元素中。

图3是根据本发明实施例的一种数据绑定装置的结构框图二，如图3所示，可选地，第一获取模块22包括：

处理单元32，用于根据HTML元素的标签特性为HTML元素指定属性信息，得到HTML片段；

添加单元34，耦合至处理单元32，用于将HTML片段添加到HTML元素中。

图4是根据本发明实施例的一种数据绑定装置的结构框图三，如图4所示，可选地，上述装置还包括：

配置模块42，耦合至第一获取模块22和第二获取模块24之间，用于将HTML元素的CSS样式配置为隐藏样式。

图5是根据本发明实施例的一种数据绑定装置的结构框图四，如图5所示，可选地，上述绑定模块28包括：

判断单元52，用于判断数据字段的数据类型；

绑定单元54，耦合至判断单元52，用于根据数据类型将数据字段绑定到DOM元素中。

可选地，上述绑定单元54用于：在数据类型为预设类型的情况下，将数据字段绑定到DOM元素的TEXT属性，其中，预设类型包括以下之一：字符串类型、数字类型、布尔对象类型；在数据类型为对象类型的情况下，将对象类型数据的属性名称对应的属性绑定到DOM元素；在数据类型为数组类型的情况下，循环数组；数组中的每个元素以DOM元素为模板生成DOM元素集合；将DOM元素集合添加到属性名称对应的父节点上。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述模块分别位于多个处理器中。

下面结合本发明可选实施例进行详细说明。

本发明可选实施例提供了一种数据绑定方法，该方法解决了在开发前端页面时，数据绑定到HTML元素这个环节开发效率低下的问题。该方法包括如下步骤：

步骤1、在HTML元素中使用attribute的形式定义此元素需要绑定的数据字段，如下代码所示：

<span property＝"propertyName"></span>，其中attribute property指定了绑定的属性值是propertyName。

步骤2、将步骤1中的HTML片段放入到HTML元素中，可以将该HTML元素隐藏，即给HTML元素指定css样式：display:none。

步骤3、从后端获取数据，获取需要绑定这部分数据的DOM节点，以及需要绑定的数据字段，将数据字段绑定到DOM节点。可以通过如下方式绑定数据：获取包含attribute为property的DOM元素，在数据中查找此property值的数据字段，判断数据字段的类型，若是字符串、数字、boolean,则简单将数据绑设置为此DOM元素的text属性即可。若是对象，则property值会设置成object.property的形式，表示此DOM绑定的是object对象的property属性。若是数组，则表示需要循环数组，数组中的每个元素都根据DOM元素为模板生成一个新的DOM元素，最终将这些DOM元素添加到property属性的父节点上。详细数据绑定核心代码如下：

在本可选实施例中，通过配置DOM元素的attribute，指定需要绑定的数据字段，通过自动化的通用代码，将数据绑定到为之配置的DOM元素中。通过本可选实施例，使用配置加自动化的方式解决数据对接过程中数据绑定开发效率低下的问题。

以上实施例仅用以说明本发明的技术方案而非对其进行限制，本领域的普通技术人员可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明的精神和范围，本发明的保护范围应以权利要求所述为准。

实施例3

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：

S1，获取HTML元素中的属性信息，其中，属性信息包括属性名称和属性值，其中，属性名称用于指示待绑定的DOM元素，属性值用于指示需要绑定的数据字段；

S2，获取属性名称对应的DOM元素；

S3，获取数据，并从数据中获取值为属性值的数据字段；

S4，将数据字段绑定到DOM元素中。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RanDOM Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

可选地，在本实施例中，处理器根据存储介质中已存储的程序代码执行上述实施例记载的方法步骤。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种数据绑定方法，其特征在于，包括：

获取HTML元素中的属性信息，其中，所述属性信息包括属性名称和属性值，其中，所述属性名称用于指示待绑定的DOM元素，所述属性值用于指示需要绑定的数据字段；

获取所述属性名称对应的DOM元素；

获取数据，并从所述数据中获取值为所述属性值的数据字段；

将所述数据字段绑定到所述DOM元素中。

2.根据权利要求1所述的方法，其特征在于，获取HTML元素中的属性信息包括：

根据所述HTML元素的标签特性为所述HTML元素指定所述属性信息，得到HTML片段；

将所述HTML片段添加到所述HTML元素中。

3.根据权利要求2所述的方法，其特征在于，在将所述HTML片段添加到所述HTML元素中之后，所述方法还包括：

将所述HTML元素的CSS样式配置为隐藏样式。

4.根据权利要求1至3中任一项所述的方法，其特征在于，将所述数据字段绑定到所述DOM元素中包括：

判断所述数据字段的数据类型；

根据所述数据类型将所述数据字段绑定到所述DOM元素中。

5.根据权利要求4中所述的方法，其特征在于，根据所述数据类型将所述数据字段绑定到所述DOM元素中包括：

在所述数据类型为预设类型的情况下，将所述数据字段绑定到所述DOM元素的TEXT属性，其中，所述预设类型包括以下之一：字符串类型、数字类型、布尔对象类型；

在所述数据类型为对象类型的情况下，将所述对象类型数据的所述属性名称对应的属性绑定到所述DOM元素；

在所述数据类型为数组类型的情况下，循环所述数组；所述数组中的每个元素以所述DOM元素为模板生成DOM元素集合；将所述DOM元素集合添加到所述属性名称对应的父节点上。

6.一种数据绑定装置，其特征在于，包括：

第一获取模块，用于获取HTML元素中的属性信息，其中，所述属性信息包括属性名称和属性值，其中，所述属性名称用于指示待绑定的DOM元素，所述属性值用于指示需要绑定的数据字段；

第二获取模块，用于获取所述属性名称对应的DOM元素；

第三获取模块，用于获取数据，并从所述数据中获取值为所述属性值的数据字段；

绑定模块，用于将所述数据字段绑定到所述DOM元素中。

7.根据权利要求6所述的装置，其特征在于，所述第一获取模块包括：

处理单元，用于根据所述HTML元素的标签特性为所述HTML元素指定所述属性信息，得到HTML片段；

添加单元，用于将所述HTML片段添加到所述HTML元素中。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

配置模块，用于将所述HTML元素的CSS样式配置为隐藏样式。

9.根据权利要求6至8中任一项所述的装置，其特征在于，所述绑定模块包括：

判断单元，用于判断所述数据字段的数据类型；

绑定单元，用于根据所述数据类型将所述数据字段绑定到所述DOM元素中。

10.根据权利要求9中所述的装置，其特征在于，所述绑定单元用于：

在所述数据类型为预设类型的情况下，将所述数据字段绑定到所述DOM元素的TEXT属性，其中，所述预设类型包括以下之一：字符串类型、数字类型、布尔对象类型；

在所述数据类型为对象类型的情况下，将所述对象类型数据的所述属性名称对应的属性绑定到所述DOM元素；

在所述数据类型为数组类型的情况下，循环所述数组；所述数组中的每个元素以所述DOM元素为模板生成DOM元素集合；将所述DOM元素集合添加到所述属性名称对应的父节点上。