A method and system for controlling page interaction using a data model

Abstract

This invention discloses a method and system for controlling page interaction using a data model, relating to the field of front-end development technology. The method includes the following steps: S1: Obtaining a view model and establishing a data model based on the obtained view model; S2: Recursively parsing the data model and loading the view model; S3: Implementing form functionality based on the form attributes bound in the data model. This invention achieves high reusability of interaction methods and reduces communication costs between models by abstracting and datafiing interaction methods and managing and using the data in a unified manner.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically to a method and system for controlling page interaction using a data model. Background Technology

[0002] Front-end development is the process of creating web pages or apps to present to users. It uses HTML, CSS, JavaScript, and various derived technologies, frameworks, and solutions to realize the user interface interaction of internet products.

[0003] The view model is a key means of implementing page interaction. It abstracts the page UI into component code, with one view corresponding to one component. The layout, style, and events of a view are defined through the view model. The state of a view flows within the view model. When existing views interact, the view model needs to expose corresponding event methods for other view models to call. However, this approach results in interaction methods being private, requiring the same logic to be rewritten in different view models. This undoubtedly increases the workload, leads to high communication costs between models, and makes code debugging and maintenance extremely complex, hindering program expansion and upgrades. Summary of the Invention

[0004] The purpose of this invention is to overcome the shortcomings of the aforementioned background technology and provide a method and system for controlling page interaction using a data model. By abstracting and digitizing the interaction methods and managing and using the data in a unified manner, a high degree of reusability of the interaction methods can be achieved, reducing the communication costs between models.

[0005] To achieve the above objectives, the present invention provides a method for controlling page interaction using a data model, the method comprising the following steps: S1: obtaining a view model and establishing a data model based on the obtained view model; S2: recursively parsing the data model and loading the view model; S3: implementing form functions based on the form attributes bound in the data model.

[0006] Furthermore, the step of building a data model based on the acquired view model involves abstracting the view model into a data model.

[0007] Furthermore, the data model and the loaded view model have the same hierarchical structure.

[0008] Furthermore, the following tasks will be performed during the data model parsing process:

[0009] S21: Complete the transfer of the input values ​​from the view model to the view model, and store the model's output values ​​in the output object according to the path of the output values ​​in the output data object;

[0010] S22: Based on the information describing how the data affects the proxy data model, and based on the description, generate a data model processing method and put it into the linkage method queue;

[0011] S23: Hijack the output events of the view model. The value output event will trigger a change in the output value and change the output object. Execute the data model processing method in the linkage method queue. When the method triggers a change in the data model, it will be synchronized to the view model, thereby changing the view UI.

[0012] S24: Hijack other events of the view model. When other events are triggered, it will check whether there is an event queue in the data model. If there is, it will trigger the event methods pointed to by the event queue in sequence. The event methods are either predefined by themselves or extended by the user. The event methods can query the corresponding data model proxy object based on the position information of the view model relative to the page structure. When the value of the object is changed, it will be synchronized to the corresponding view model, thereby changing the view UI. The event model will also send the output object to the server.

[0013] Furthermore, based on the form attributes bound in the data model, the form functionality is implemented. Specifically, when the data model is bound with an attribute indicating whether form functionality is required, the form control wraps the view model, thereby automatically collecting the output value; when a form validation rule attribute is bound, the output value is validated; when a form value conversion rule is bound, the output value is converted to a specific format.

[0014] This invention also provides a system for controlling page interaction using a data model, the system comprising a data model parsing component, a global data distribution component, a single-node control component, and form controls.

[0015] The data model parsing component receives page descriptions in JSON format and generates page update functions, form error collection objects, form objects, output value objects, a queue of linked methods, a collection of data proxy objects, and an event collection object. It then passes these generated objects to the global data distribution component. In addition, it generates a set of form processing functions, providing users with the ability to retrieve, validate, set, and reset form items. The data model parsing component also recursively processes the JSON-formatted page descriptions to obtain individual data models, which are then passed to the single-node control component.

[0016] The single-node control component is primarily used to receive data from the data model, load the corresponding view model based on the attributes in the data model, and bind the view model's input and output values, default values, attribute sets passed to the view model, binding paths for the view model's input and output values, and proxy object paths. It also intercepts output events and other events. When an output event is detected, it changes the output value object and sequentially triggers methods in the linked method queue. If it's another object, it retrieves and executes the specific method from the event queue based on the data in the event queue, generates a data proxy object, generates a data model processing method based on the description of how the data affects it, inserts it into the linked method queue, and binds the view model's input and output value processing functions. If form functionality is required, it wraps the view model with form controls, giving it form processing capabilities.

[0017] The form control provides the UI style required for the form, as well as the ability to collect, transform, set, reset, and validate the input and output values ​​of the view model.

[0018] The beneficial effects of this invention are as follows:

[0019] This invention further abstracts the view model into a JSON-formatted data model. Changes in attributes within the data model can describe changes in the view model, forming a binding relationship between the two. Using the method and system provided by this invention, events bound to the page UI can be intercepted. When an event is triggered, methods in the method queue are executed cyclically according to the event description data. If changes to the data model are triggered during method execution, changes to the view UI will be triggered. When a communication method is triggered, communication with the server will occur. This achieves the ability to control page interaction through data. Attached Figure Description

[0020] Figure 1 This is a schematic diagram of the method for controlling page interaction using a data model according to the present invention;

[0021] Figure 2 This is a schematic diagram of the scheme for controlling the page interaction system using a data model according to the present invention;

[0022] Figure 3 This is a flowchart illustrating the data flow for implementing the page interaction method in this invention. Detailed Implementation

[0023] The present invention will now be described in further detail with reference to the accompanying drawings and specific embodiments.

[0024] See Figure 1-3 As shown, this embodiment of the invention provides a method for controlling page interaction using a data model, the method comprising the following steps:

[0025] Step S1: Obtain the view model and build a data model based on the obtained view model. Specifically, building a data model based on the obtained view model means abstracting the view model into a data model.

[0026] Step S2: Recursively parse the data model and load the view model. The data model and the loaded view model have the same hierarchical structure. Specifically, the following tasks are performed during the data model parsing process: S21: Pass the value to the view model and store the model's value in the output object according to dataBind; S22: Based on the cascadeOn information, proxy the data model and generate data model processing methods according to the description, placing them in the linkage method queue; S23: Hijack the output events of the view model. Value output events will trigger changes in the value and change the output object, executing the data model processing methods in the linkage method queue. When a method triggers a change in the data model, it will be synchronized to the view model, thereby changing the view UI; S24: Hijack other events of the view model. When other events are triggered, it will check whether the data model contains an action. If it exists, it will trigger the event methods pointed to by the action in sequence. The event methods are predefined by this invention and can also be extended by the user; the event methods can query the corresponding data model proxy object based on the name information; when the value of the object is changed, it will be synchronized to the corresponding view model, thereby changing the view UI; the event model can also send the output object to the server.

[0027] Step S3: Implement form functionality based on the form attributes bound to the data model. Specifically, the invention provides a form control. When the `needFormItem` attribute is bound to the data model, the view model is wrapped with the form control, thus automatically collecting output values. When the `rules` attribute is bound, the output values ​​are validated. When `transform` is bound, the output values ​​are converted to a specific format.

[0028]

[0029]

[0030] The present invention also provides a system for controlling page interaction using a data model, the system including a data model parsing component AnalysisEngine, a global data distribution component AnalysisEngineContext, a single-node control component DataRenderContext, and a form control FormItem.

[0031] The data model parsing component is used to receive the page description JSON and generate the page update function, the form error collection object errorObject, the form object formValue, the output value object formData, the linkage method queue cascaderList, the data proxy object collection nameMap, and the event collection object actions.

[0032] The generated object is then handed over to the global data distribution component, AnalysisEngineContext. In addition, a set of form processing functions is generated, providing users with the ability to retrieve, validate, set, and reset form items. AnalysisEngine also recursively processes the page description JSON to obtain a single data model, which is then passed to the single-node control component, DataRenderContext.

[0033] The single-node control component, DataRenderContext, is primarily used to receive data from the data model, load the corresponding view model based on the attributes in the data model, and bind the view model to `value`, `defaultValue`, `wprops`, `value` binding path `names`, and proxy object path `paths`. It intercepts output events and other events. When an output event is detected, it modifies the output value object and sequentially triggers the methods in `cascaderList`. If it's another object, it retrieves the specific method from `actions` based on the `action` data and executes it. It generates a data proxy object and generates data model processing methods based on `cascadeOn`, inserting them into the linked method queue `cascaderList`. It also binds the value processing function. If `needFormItem` is true, it wraps the view model with a `FormItem` control, giving it form processing capabilities.

[0034] The FormItem form control provides the UI style required for the form, as well as the ability to collect, transform, set, reset, and validate values. Whether the control is enabled is controlled by the DataRenderContext component.

[0035] For detailed procedures, please refer to the following example:

[0036] The AnalysisEngine component first receives a batch of configuration parameters.

[0037] The AnalysisEngine component receives the following data:

[0038] dataSource: One of the essential parameters that must be passed, in JSON format, which contains component configuration information and hierarchical structure.

[0039] Example: {widget:'page',wprops:{label:123,}}

[0040] options: An important configuration file for the rendering engine, where the components property is required.

[0041] `components`: A collection of component entities, stored as key-value pairs. The key must correspond to the widget in the component configuration information, and the value must be a React component.

[0042] Example: options:{components:{page:(props)=>props.label}}

[0043] actions: An extension of actions, stored as key-value pairs. The value must be a function that takes two arguments and must return a Promise.

[0044] Example: {nextModal:() => {Modal.confirm({title:'Are you sure you want to proceed to the next step?'});}}

[0045] `events`: Event extension. Currently, the patent includes three built-in events: `onClick`, `onChange`, and `onSubmit`. Custom events for the view model, such as `onOk` and `onCancel`, are not yet supported. These can be extended using this parameter if necessary.

[0046] example:{

[0047] onOk:(e,{options,formData,formData,formValue,formValue,targetData,dataProxy})=>{

[0048] targetData.hidden = true;

[0049] }

[0050] }

[0051] fieldProps: An object whose content is passed through to each view model.

[0052] type: This specifies whether it's for the PC or the mobile app, and is mainly used to determine which theme should be applied to the form component.

[0053] `transform`: Transforms form values, used to change the form values ​​of nodes that are bound to `transform`.

[0054] globalData: Global data reused by multiple nodes

[0055] embed: Nested mode, when enabled, will be inserted into the parent process.

[0056] `localReuse`: Local reuse. This property is useful for reusing options passed down from the parent element, but not for reusing form elements. However, it must be used in conjunction with `embed`; it has no effect when used alone.

[0057] children: Because the rendering engine also uses tags, you can add child nodes to use it.

[0058] lifeCycle: The lifecycle object contains willRender (executed before each render) and afterRender (executed after each render).

[0059] engineRef: The ref object of the rendering engine, which contains some form processing methods.

[0060] nameMap: A collection of proxy objects containing descriptive data for components that have the name attribute bound to them.

[0061] formData: The collection of values ​​of the component that has the dataBind property bound to it.

[0062] cascaderList: Nodes bound to cascadeOn will have a function passed to this array.

[0063] 2. After obtaining the configuration parameters, the following data will be passed to the AnalysisEngineContext component, which will recursively parse the value of dataSource and load it into the DataRenderContext component.

[0064] The AnalysisiEngineContext component receives the following parameters:

[0065] The following are types of data: dataSource, formData, options, events, inEngine:true (enabled), actions, cascaderList, runCascade, nameMap, globalData, update (controls the reloading of the AnalysisEngine component), fieldProps, isEngineLoaded (the AnalysisEngine component has finished loading), formMoment (the object used by the setFormData method), formWithMoment (the object used by the setFormWithData method), staticDataMoment (the object used by the setStaticData method), formValue (the form object), errorObject (the form error object), type, transform, formRef (a collection of form methods), and deTransform (a collection of methods for deconstructing form values).

[0066] The DataRenderContext component will execute sequentially upon loading:

[0067] (1) Determine whether the node is bound to the hidden attribute. If it is true, the view model will not be loaded.

[0068] (2) Determine if there is an error in loading the view model. If there is an error, exit the process and display the error message.

[0069] (3) Check if formMoment has a value. If it does, retrieve the value, assign it, and modify the value.

[0070] (4) Check if formWithMoment has a value. If it does, retrieve and modify the value.

[0071] (5) Check if staticDataMoment has a value. If it does, retrieve and modify the value.

[0072] (6) Determine if this is the first load; if so, generate a data proxy object and insert it into the nameMap.

[0073] (7) Check if needFormItem is true. If it is, wrap the formItem control.

[0074] (8) Load the view model and determine if there is a sub-model. If so, use the sub-model data to load the DataRenderContext component in a loop.

[0075] It should be noted that the system provided in the above embodiments is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the system can be divided into different functional modules to complete all or part of the functions described above.

[0076] This invention is not limited to the above-described embodiments. For those skilled in the art, several improvements and modifications can be made without departing from the principle of this invention, and these improvements and modifications are also considered to be within the scope of protection of this invention.

Claims

1. A method for controlling page interaction using a data model, characterized in that, The method includes the following steps: S1: Obtain the view model and build a data model based on the obtained view model; S2: Recursively parse the data model and load the view model; S3: Implement form functionality based on the form attributes bound in the data model; The following tasks are performed during the process of parsing the data model: S21: Complete the transfer of the input values ​​from the view model to the view model, and store the model's output values ​​in the output object according to the path of the output values ​​in the output data object; S22: Based on the information describing how the data affects the proxy data model, and based on the description, generate a data model processing method and put it into the linkage method queue; S23: Hijack the output events of the view model. The value output event will trigger a change in the output value and change the output object. Execute the data model processing method in the linkage method queue. When the method triggers a change in the data model, it will be synchronized to the view model, thereby changing the view UI. S24: Hijack other events of the view model. When other events are triggered, it will check whether there is an event queue in the data model. If there is, it will trigger the event methods pointed to by the event queue in sequence. The event methods are predefined or extended by the user. The event methods can query the corresponding data model proxy object based on the position information of the view model relative to the page structure. When the value of the object is changed, it will be synchronized to the corresponding view model, thereby changing the view UI. The event model will also send the output object to the server.

2. The method according to claim 1, characterized in that, The process of building a data model based on the acquired view model involves abstracting the view model into a data model.

3. The method according to claim 1, characterized in that, The data model and the loaded view model have the same hierarchical structure.

4. The method according to claim 1, characterized in that, Based on the form attributes bound in the data model, the form functionality is implemented. Specifically, when the data model is bound with an attribute indicating whether form functionality is needed, the form control wraps the view model, thereby automatically collecting the output value; when a form validation rule attribute is bound, the output value is validated. When a conversion rule is bound to the form value, the converted output value will be in a specific format.

5. A system for controlling page interaction using a data model, characterized in that, The system includes a data model parsing component, a global data distribution component, a single-node control component, and form controls. The data model parsing component receives page descriptions in JSON format and generates page update functions, form error collection objects, form objects, output value objects, a queue of linked methods, a collection of data proxy objects, and an event collection object. It then passes these generated objects to the global data distribution component. In addition, it generates a set of form processing functions, providing users with the ability to retrieve, validate, set, and reset form items. The data model parsing component also recursively processes the JSON-formatted page descriptions to obtain individual data models, which are then passed to the single-node control component. The single-node control component is primarily used to receive data from the data model, load the corresponding view model based on the attributes in the data model, and bind the view model's input and output values, default values, attribute sets passed to the view model, binding paths for the view model's input and output values, and proxy object paths. It also intercepts output events and other events. When an output event is detected, it changes the output value object, triggering methods in the linked method queue sequentially. If it's another object, it retrieves and executes the specific method from the event queue, generates a data proxy object, and generates a data model processing method based on the description of how the data affects it. This method is then inserted into the linked method queue. Additionally, it binds the view model's input and output value processing functions. If form functionality is required, it wraps the view model with form controls, granting it form processing capabilities. The form control provides the UI style required for the form, as well as the ability to collect, transform, set, reset, and validate the input and output values ​​of the view model.

Images