Js data driven

at present, there is such a research: when you add, delete, modify and query with js, all the data comes from the array, and then dynamically generate dom nodes by traversing the array, and then delete elements, first delete the corresponding data in the array, and then automatically update the view. Similarly, after editing the data, the data in the array is updated, and then the view is updated automatically, which is a bit similar to the current vue data-driven. At present, it is possible to add, delete, modify and query dom nodes, but there is no way to update the array at the same time.

can you provide some ideas? it would be better to have code. Thank you.

The

view is similar to the following:

Javascript
Mar.15,2021

just delete the DOM and delete the array data at the same time? You need to bind a unique value that represents the row on each line, and use it to delete and other operations

is somewhat similar to the data driver of today's vue. At present, it is possible to add, delete, modify and query dom nodes, but there is no way to update the array at the same time.

if it is data-driven, then you should delete the data instead of dom .

the following is pseudo code 

let data= {users:[{...}]};
let usersCom = new Component(data)

class Component{
    constructor(){
        //
        //objectget/set
        //push/shift
        //datadom
    }
    render(){
        ...
    }
}

updates the data in the delete function. For native words like

, just delegate with the event, get the corresponding subscript and call splice (index, 1 of the array. If you write a small driver yourself, you can imitate vue and use Object.defineProperty (list, {set,get}) to listen on the array. Every time the array changes and refreshes the dom

Previous: Why can't data like arr [2] = {name:1} be monitored when vue data is being monitored?

Next: How does Cisco Simulator Control acl

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu