jquery Syncing dom element values

Question

I have a DOM element like this:

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

I have many other elements elsewhere on the page that I need to sync with the 'master-value'.

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

When I change the value of the 'master-value', I want all the synced elements to update with it.

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

Should affect:

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

What I don't want, is on every change of 'master-value' to have to search through all the elements in order to find the synced elements in order to change them. I think that's quite slow when there are many elements that needs to be searched through.

There should be some way for the child values to be pre-bound to the master value so that the selection goes quickly.

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

I have some ideas, for instance: I can create an array of preselected synced objects, bind a custom event on the master value and run that event whenever I change the value. The event would go through the array to update all the child elements.

I'm sure there's a better way of doing it though...

Thanks!

Answer 1

You can store the selector once, like this:

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

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

The elements variable/jQuery object will keep an array of references to DOM elements so it won't be traversing to find them each time.

Answer 2

wouldn't it be easier to give them all the same class?

So you coud do

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

Answer 3

If you're looking for plugin type of functionality, try this:

When setting up, it takes an object with one property syncWith to set up the elements it should sync with.

When setting the text, it will set the text for the master and the synced elements.

Try it out: http://jsfiddle.net/GH33J/

Just a first attempt. There would be room for improvement if (for example) the master was more than one element. There should be a global reference to all the elements to synchronize and an option to tell if the masters should be synced too.

$.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

OK here we go:

This is the official data linking plugin from Microsoft. It's now being supported by the jQuery Core team, so we know it's good. :)

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/