Теперь давайте рассмотрим похожую ситуацию за исключением того что вместо различных вариантов шаблонов, у нас в каждом элементе будут отображаться списки из различных групп:
Начальная разметка присылаемая сервером при первой загрузке:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!--------------------------------->
<div data-test_array="array" class="row">
<div data-test_container="container" class="card col-3">
<p data-test_container-main_text="text">контейнер 1</p>
<div data-test_container-test_group="group">
<div data-group_cont_2="container" style="border: 1px solid red">
<p data-group_cont_2-text="text" data-group_cont_2-style="style" style="color: blue;" > текст варианта 2 </p>
<p data-group_cont_2-text2="text">дополнительный текст1</p>
</div>
<div data-group_cont_2="container" style="border: 1px solid red">
<p data-group_cont_2-text="text" data-group_cont_2-style="style" style="color: blue;" > текст варианта 2 </p>
<p data-group_cont_2-text2="text">дополнительный текст2</p>
</div>
</div>
</div>
<div data-test_container="container" class="card col-3">
<p data-test_container-main_text="text">контейнер 2</p>
<div data-test_container-test_group="group">
<div data-group_cont_1="container" style="border: 1px solid green">
<p data-group_cont_1-text="text" data-group_cont_1-style="style" style="color: green;" > текст варианта 1 </p>
</div>
<div data-group_cont_1="container" style="border: 1px solid green">
<p data-group_cont_1-text="text" data-group_cont_1-style="style" style="color: green;" > текст варианта 1 </p>
</div>
</div>
</div>
</div>
<!--------------------------------->
</div>
</div>
</div>
Описание приложения:
var StateMap = {
test_array: {
container: "test_container",
props: ["test_group", "main_text"],
methods: {
},
},
virtualArrayComponents: {
group_array_1:{
container: "group_cont_1",
props: ["text", "style"],
methods: {
}
},
group_array_2:{
container: "group_cont_2",
props: ["text", "style", "text2"],
methods: {
}
},
}
}
window.onload = function(){
var HM = new HtmlixState(StateMap);
console.log(HM);
}
Данные с сервера которые нужно обновить:
var resp = [
{main_text: "Название 1", test_group: {componentName: "group_array_1", group:[{text: "оновной текст 2", style: "color: yellow;"}, {text: "оновной текст gg", style: "color: red;"} ] } },
{main_text: "Название 2", test_group: {componentName: "group_array_2", group:[{text: "оновной текст 3", text2: "дополнительный текст3", style: "color: red;"} , {text: "оновной текст 4", text2: "дополнительный текст4", style: "color: blue;"} ] } },
{main_text: "Название 3", test_group: {componentName: "group_array_1", group:[{text: "оновной текст 2", style: "color: yellow;"}, {text: "оновной текст gg", style: "color: red;"}, {text: "оновной текст gg", style: "color: black;"} ] } },
{main_text: "Название 4", test_group: {componentName: "group_array_2", group:[{text: "оновной текст gg", text2: "дополнительный текст2", style: "color: blue;"}, {text: "оновной текст gg", text2: "дополнительный текст5", style: "color: green;"}, {text: "оновной текст gg", text2: "дополнительный текст6", style: "color: blue;"} ] } },
];
Такой же принцип как и у render-variant только теперь в каждом свойстве test_group у нас объект с двумя обязательными полями componentName - имя виртуального массива и group - массив с обьектами для каждого пункта обновляемой группы.
window.setTimeout( function(){
HM.state["test_array"].reuseAll(resp);
console.log(HM.state["test_array"].getAll());
//получение данных только необходимых свойств
console.log(HM.state["test_array"].getAll({main_text: "", test_group: {text: "", text2: ""} }));
console.log(HM.state["test_array"].getAll({main_text: "", test_group: {componentName: "", text: "", text2: ""} }));
}, 2000);