m);
}
“`
4. 使用數據源
使用數據源和綁定數據差不多,唯一不同的是需要將綁定的數據替換成數據源的數據:
“`
function renderList(){
var list = document.querySelector(‘.list’);
list.innerHTML = ”;
for(var i = 0; i
var item = data[i];
var listItem = document.createElement(‘div’);
listItem.className = ‘list-item’;
listItem.innerHTML = ”+item.title+”+item.desc+”;
list.appendChild(listItem);
}
}
renderList();
“`
5. 刷新列表
當數據源數據有更新時,我們需要調用 `renderList()` 方法來刷新列表視圖:
“`
data.push({
title: ‘列表項4’,
desc: ‘列表項4的描述’
});
renderList();
“`
這樣就可以實現公共列表的動態更新了。
四、總結
通過以上的介紹,我們可以看到,公共列表的實現非常簡單。只需要定義列表項的樣式和內容、創建數據源、將數據源與列表項進行綁定、將數據源綁定到列表組件上、調用刷新方法來更新列表視圖等幾個簡單的步驟,就可以實現一個可配置的公共列表控件。開發者可以根據實際需求,自由組合和擴展這些步驟,以實現更豐富的列表效果。