JQuery Синхронизация значений элементов DOM

Question

У меня есть такой элемент DOM:

<div id='master-value'>Apples</div>

У меня есть много других элементов на странице, которые мне нужно синхронизировать с «master-value».

<div class='fruit-value' data-reference='master-value'>Apples</div>
<div class='some-fruit' data-reference='master-value'>Apples</div>

Когда я изменяю значение «master-value», я хочу, чтобы все синхронизированные элементы обновлялись вместе с ним.

$('#master-value').text('Pears');

Должно повлиять:

<div class='fruit-value' data-reference='master-value'>Pears</div>
<div class='some-fruit' data-reference='master-value'>Pears</div>

Чего я не хочу, так это чтобы при каждом изменении 'master-value' приходилось искать все элементы, чтобы найти синхронизированные элементы, чтобы их изменить. Я думаю, что это довольно медленно, когда есть много элементов, которые нужно искать.

Должен быть какой-то способ, чтобы дочерние значения были предварительно привязаны к главному значению, чтобы выбор выполнялся быстро.

$('.fruit-value, .some-fruit').sync('#master-value');

У меня есть несколько идей, например: я могу создать массив предварительно выбранных синхронизированных объектов, привязать пользовательское событие к основному значению и запускать это событие всякий раз, когда я изменяю значение. Событие будет проходить через массив для обновления всех дочерних элементов.

Я уверен, что есть лучший способ сделать это, хотя ...

Спасибо!

Answer 1

Вы можете сохранить селектор один раз, например так:

var elements = $('.fruit-value, .some-fruit'); //do this once

elements.text($("#master-value").text()); //when you want to sync

Объект elements variable / jQuery будет хранить массив ссылок на элементы DOM, поэтому вам не придется искать их каждыйвремя.

Answer 2

ОК, мы идем:

Это официальный плагин для связывания данных от Microsoft. Теперь он поддерживается командой jQuery Core, поэтому мы знаем, что это хорошо. :)

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Answer 3

Если вы ищете тип функциональности плагина, попробуйте это:

При настройке требуется объект с одним свойством syncWith для настройки элементов, с которыми он должен синхронизироваться.

При настройке текста он устанавливает текст для основного и синхронизируемых элементов.

Попробуйте: http://jsfiddle.net/GH33J/

Просто первая попытка. Там было бы место для улучшения, если бы (например) мастер был более чем одним элементом. Должна быть глобальная ссылка на все элементы для синхронизации и возможность указать, следует ли синхронизировать master .

$.fn.sync = function(arg) {
       // if arg plain object, we are doing an initial setup
    if ($.isPlainObject(arg)) {
        return this.each(function() {
            $.data(this, 'syncWith', $(arg.syncWith));
        });
        // if arg is jQuery object, we are adding new items
    } else if (arg.jquery) {
        return this.each(function() {
            var $set = $.data(this, 'syncWith');
            $.each(arg, function() {
                $set.push(this);
            });
        });
        console.log(this.data('syncWith'));
        // otherwise assume we have a string, and are syncing a new value
    } else {
        return this.each(function() {
            $(this).text(arg);
            $.data(this, 'syncWith').text(arg);
        });
    }
};


// Set up the sync
$('#master-value').sync({
    syncWith: '.fruit-value,.some-fruit'
});

var $new = $('<div class="fruit-value">Apples</div>').appendTo('body');
// Pass a jQuery object containing newly created element(s) to add to the set
$('#master-value').sync($new);

// Activate a sync
$('#master-value').sync("pears");​

Answer 4

не проще ли дать им все одинаковый класс?

Так что вы можете сделать

$('.fruit').text('Pears')