велосипед для редактора строк
 

наверняка это миллион раз уже изобретено
простейший редактор текста

надо чтобы список DOM-элементов отображал содержимое элементов массива
тоесть визуализация массива элементов

так чтобы при редактировании элементов через интерфейс документа массив элементов синхронизировался

не могу понять как это сделать чтобы не было перерисовки DOM-элементов при обновлении массива элементов

то есть чтобы выбирая любой элемент в списке DOM-элементов всегда выбирался соответствующий элемент в массиве элементов
то есть чтобы сохранялось соответствие порядкового номера обоих массивов

задача простая и вроде понятно выразил


---------------------------
еще раз -


есть массив в котором элементы - например строки
этот массив надо визуализировать на экране в виде списка строк
полученные элементы интерфейса содержат некий код для функционирования редактора
редактор добавляет удаляет элементы массива
изменения сразу происходят на экране, меняется DOM
и при этом изменения вносятся в массив - тоесть происходит синхронизация

я понимаю что если просто заново отобразить все элементы массива на экране то редактор заработает
но не могу понять как это сделать чтобы не надо было перерисовывать DOM

сто пардонов за оффтоп.. вы часом не сеошник?

а я вот честно говоря нихера не понял))

первая практика после знакомства с js
простейший редактор текста делаю

есть куча готовых редакторов
http://www.tinymce.com/
http://nytimes.github.io/ice/demo/
http://ace.c9.io/#nav=about

можно еще покопаться)

сам хочу понять алгоритм
ума не хватит читать чужой сложный кот

открываешь исходники и смотришь))

спасибо
твои советы похоже бесполезны
мне все время кажется что на этом форуме много пидарасов ))

Когда выводите текст в редакторе - связываейте его не с конкретным html элементом, а с текстовой нодой внутри него.

Можно сделать карту массива, например:

arr = ["string1", "string2", "string3"];
map = {
   0: textNode1,
   1: textNode2,
   3: textNode3
}

Тогда отображение изменения второго элемента массива будет так:

arr[1] = "trololo";
map[1].textContent = arr[1];

непонятно

я так рассуждаю - элементы на экране это массив, нумерованый список и данные для отображения это массив
доступ к ним по одинаковому порядковому номеру в списке-массиве

но после добавления удаления элементов на экране исчезает соответствие порядковых номеров

Должна быть синхронизация. Вы же знаете какой элемент был удален - удаляете элемент массива

если проблема в том чтобы по удаленному элементу найти связь с элементом массива - можете при создании добавлять ему атрибут номера. Что-то типа data-index="someIndex"

товарищи как эта штуковина называется?
классика же
наверняка есть паттерн или шаблон для работы со списками - с динамическим добавлением удалением элементов

про data- первым делом и подумал но пока не придумал как его использовать

нужна помощь зала

Вообще обычно никто не парится с прямым управлением домом. Есть шаблонизаторы, которые решают все эти проблемы. Шаблонизаторы бывают как простые (которые полностью передергивают дом), так и покруче (которые запоминают связи данных и конретной текстовой ноды). Выбор их зависит от задачи и необходимости оптимизаций.

я хочу понять устройство велосипеда ))
мне надо самому понять и собрать код а не копировать чужое
мне надо на практике доучиться

вот эту проблему решу и тогда кажется смогу собрать редактор
еще сразу же думаю как сделать отмены действий: там нет пока пролблем

Хороший шаблонизатор (особенно такой как вы хотите с частичным обновлением) - это не паттерн, а много-много ООП кода.

а почему это называется шаблонизатор

Потому что вам дужно выводить данные в определенном формате (шаблоне)

Например шаблон модального окна с использованием шаблонизатора underscore может выглядеть так:

<div>
   <div class="title"><%= title %></div>
   <div class="content"><%= content %></div>
   <div class="buttns">
       <% for (var i = 0; i < buttons.length; i++) { %>
            <button><%= button[i].text %></button>
       <% } %>
   </div>
</div>

Хочу получить верстку модального окна с 2 кнопками, заголовком и контентом:

_.template(modalTpl)({
      title: "Заголовок",
      content: "Контент",
      buttons: [{text: "Да"}, {text: "Нет"}]
   });

Таким образом мы уменьшаем в коде прямую работу с домом. Это удобно, особенно когда есть много похожих операций.

ты хош сказать что мой шаблон это список-массив ?

наверное это надо перечитнуть
http://habrahabr.ru/post/160477/

а есть ли возможность узнать порядковый списочный номер элемента хтмл-
списка ?

тоесть можно ли при добавлении удалении произвольного количества элементов - всегда можно узнать ноdый порядковый номер ?

то есть можно ли кликая по элементу получать его порядковый номер в списке дочерних элементов ?

nverv,
конечно можно