[發明專利]數據綁定方法及裝置

在審

• 申請號: 201710104616.7
• 申請日: 2017-02-24
• 公開（公告）號: CN108509395A
• 公開（公告）日: 2018-09-07
• 發明（設計）人: 周建濤
• 申請（專利權）人: 北京國雙科技有限公司
• 主分類號: G06F17/22
• 分類號: G06F17/22;G06F17/30
• 代理公司: 北京康信知識產權代理有限責任公司 11240
• 代理人: 韓建偉;張永明

本發明提供了一種數據綁定方法及裝置，其中，該方法包括：獲取HTML元素中的屬性信息，其中，屬性信息包括屬性名稱和屬性值，其中，屬性名稱用于指示待綁定的DOM元素，屬性值用于指示需要綁定的數據字段；獲取屬性名稱對應的DOM元素；獲取數據，并從數據中獲取值為屬性值的數據字段；將數據字段綁定到DOM元素中。采用上述技術方案，解決了相關技術中數據綁定效率低的問題，提高了數據綁定的效率。

技術領域

本發明涉及通信領域，具體而言，涉及一種數據綁定方法及裝置。

背景技術

在頁面的前端開發的過程中，使用異步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元素中。