Лучший способ связать элементы пользовательского интерфейса с объектами поддержки JavaScript

Question

Это перефразировка поста, который я сделал на прошлой неделе . Я был удивлен, что не получил больше ответа, подумав, может быть, я не очень хорошо описал / назвал его.

Простейший способ описать это:

Есть ли что-то вроде spring: bind для javascript / dhtml?

Общий вид того, что я хочу:

В моем приложении у меня есть список "подписчиков" объектов, которые я загрузил через ajax. Я хотел бы динамически рисовать элементы пользовательского интерфейса, представляющие эти объекты, и регистрировать обработчики событий, чтобы объекты поддержки обновлялись, когда пользователь редактирует представление.

Чем ниже уровень мыслей

Динамическое отображение данных js в браузере тривиально. Это также не большая проблема, чтобы написать обработчики событий для каждого типа данных, но это немного утомительно. Я чувствую, что должна быть какая-то библиотека, которая будет вести себя как система шаблонов, динамически создавая элементы HTML, заполняя заполнители данными из моих js-объектов, но переходите к дополнительному этапу обновления вспомогательных объектов, когда пользователь вносит изменения в элементы формы. Самый близкий пример, который мне известен, это серверная технология, функциональность Spring (java framework), связывающая , где элементы формы в шаблонах кодируются в соответствии с системой, в которой они автоматически связываются с моделью. объекты на сервере.

Итак, существует ли то, что я описал, в переднем мире?

Answer 1

Я не знаю о библиотеках того типа, который вы описали, но jQuery предлагает очень полезную функцию data(), которая позволяет связывать произвольный фрагмент данных с элементом DOM, используя ключ. Добавление нового элемента и связывание с ним данных может выглядеть следующим образом:

var elem = $('<div class="subscriber">...</div>').appendTo(someContainer);
elem.data('yourKey', backingObject);

Используя делегирование событий (например, функцию live()), вы можете добавить один обработчик событий, который действителен для всех графических представлений ваших объектов подписчика, независимо от того, существуют они или нет.

$('.subscriber').live('click', function(e) {
    var backingObject = $(this).data('yourKey');
    // Now call some methods on the backing object
});

Надеюсь, это вам как-то поможет.

Answer 2

Нокаут выглядит так, как будто выполняет ту работу, которую вы ищете.

Answer 3

Это не ответ, а более крупный комментарий. Это может помочь написать API, который вы хотите использовать, например:

var jsObj = {};

jsObj.bind(document.getElementById("firstName"), "onchange");
//binds the data from the firstName element to the jsObject in property "firstName" during the onchange event.

Это то, что вы пытаетесь сделать?

Появляется быстрый поиск в Google: http://api.jquery.com/bind/

Может быть интересно сделать делегат для привязки jQuery, что не сложно сделать.