鍍金池/ 問答/HTML/ js 數(shù)據(jù)驅(qū)動

js 數(shù)據(jù)驅(qū)動

目前有這樣的一個研究，用 js 進行的增刪改查的時候，所有的數(shù)據(jù)都是來自數(shù)組中的，然后通過遍歷數(shù)組動態(tài)生成 dom 節(jié)點，然后刪除元素的時候，先刪除數(shù)組中對應(yīng)的數(shù)據(jù)，然后視圖自動更新，同樣的，編輯數(shù)據(jù)后，數(shù)組中的數(shù)據(jù)更新，然后視圖再自動更新，有點類似現(xiàn)在 vue 的數(shù)據(jù)驅(qū)動。目前能實現(xiàn)對 dom 節(jié)點的增刪改查，但是沒有辦法實現(xiàn)同時更新數(shù)組。

能提供一些思路嗎，有代碼就更好了，謝謝。

視圖類似下面這種：
圖片描述

回答
編輯回答
執(zhí)念
有點類似現(xiàn)在 vue 的數(shù)據(jù)驅(qū)動。目前能實現(xiàn)對 dom 節(jié)點的增刪改查，但是沒有辦法實現(xiàn)同時更新數(shù)組。

如果是數(shù)據(jù)驅(qū)動，那么你應(yīng)該刪除數(shù)據(jù)而不是dom。

以下為偽代碼

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

class Component{
    constructor(){
        //遍歷傳進來的屬性
        //object重寫get/set
        //數(shù)組對象添加push/shift等方法
        //讓數(shù)據(jù)變動的時候根據(jù)data的內(nèi)容重新渲染dom
    }
    render(){
        ...
    }
}
2017年3月5日 23:23
編輯回答
兮顏

刪除DOM的同時刪除數(shù)組數(shù)據(jù)不就可以了？在每一行需要綁定代表該行的唯一值，用它去做刪除等操作

2017年12月21日 01:00
編輯回答
毀憶

在刪除函數(shù)里面更新數(shù)據(jù)。

2017年6月9日 11:17
編輯回答
尋仙

這種原生的話，用事件委托吧，拿到對應(yīng)的下標然后調(diào)用數(shù)組的splice（index, 1）就行，自己寫一個小驅(qū)動的話，可以仿vue ，使用Object.defineProperty（list, {set,get}）對數(shù)組進行監(jiān)聽，數(shù)組每次改變刷新dom就行

2017年3月11日 22:01