Is it possible to link container to other one?

Question

I have an array of data. I have put this data on my site in different places over different attributes, how innerHTML value placeholder etc. Is it possible to link this values with the array from where I can take data? So that when I change the data in array, it going automatic changed on the site? Also I try to show how I did it mean:

var test = Array();
test['place1'] = 'NY';
var myspan = document.createElement('span');
myspan.innerHTML = test['place1'];

On some event the value of test['place1'] is changed to 'LA', and at the same moment the value of myspan.innerHTML must be changed too.

Native JS only please.

If you do things like `test['place1']` then you are using arrays wrong. — NullUserException, Jan 29 '13 at 16:32
Ooook.. what is it then? Is it changing the view of the Question? — BASILIO, Jan 29 '13 at 16:33
Not really, it's just a pointer. JS arrays only take natural (0 and positive integer) indexes, when you do `test['place']` you're creating a `place` *property* in the object. If you're doing that, might as well go with `var test = {}` — NullUserException, Jan 29 '13 at 16:36
@BASILIO In an array, the keys are natural numbers. If you want to do something like `test['place1']`, then `test` should be an object. — Oriol, Jan 29 '13 at 16:36
To answer your question, no you can't. At least not with any of the native JS types and objects. You'd have to create some sort of custom object that automagically changes the innerHTML an element is bound to when the element is changed. — NullUserException, Jan 29 '13 at 16:38

Brian Mains · Answer 1 · 2013-01-29T18:24:34.873

0

What you are talking about is an MVVM solution. Most MVVM JavaScript solutions uses some object that represents an observable, which is a field within the object. When the value in the object changes, the observable lets the framework know to update the DOM. It also listens to the DOM for change events, and updates the object in reverse. For arrays, it's a similar process: it listens for adds or removes of the array, and updates the UI accordingly.

As @MCL points out in the comments on this post below, there is a way to watch changes to an object, and it isn't overly difficult to generically attach to an element on the DOM. However, There are a lot of good frameworks out there that make this REALLY easy, so that may be something to consider.

edited Jan 29 '13 at 18:24

answered Jan 29 '13 at 16:39

Brian Mains

50,520
35
148
257

@MCL thanks, that's good to know. I wasn't aware that was possible natively. Though that can be a lot of manual work, and it that approach compliant with older browsers? – Brian Mains Jan 29 '13 at 18:22
I can't answer that with certainty, but I don't see any reason why it shouldn't be... – MCL Jan 29 '13 at 21:47

the system · Accepted Answer · 2013-01-29T16:50:38.757

This needs to be manually managed. A simple solution would be something like this:

function Place(container, initVal) {
    this.container = container ? container : {};
    this.set(initVal);
}
Place.prototype.place = "";
Place.prototype.get = function() {
    return this.place;
}
Place.prototype.set = function(val) {
    this.place = val;
    this.container.innerHTML = val;
}

var test = {}; // object

test['place1'] = new Place(document.createElement('span'), "NY")

test['place1'].set('New Value');

This is not a full-feature solution, but gives you an idea of the coordination that needs to take place.

If you're only supporting modern browsers, then the syntax can be cleaned up a bit by using getters/setters.

In the future, you'll be able to use Proxy, which will make it even easier and cleaner.

score 0 · Answer 3 · answered Jan 29 '13 at 17:01

There is no native way to bind an attribute of an HTML element to the values of an array, but you aren't actually using an array; you're using an object, and it is a simple matter to define special features on an object. For example:

First, define your object:

function boundArray(){
    this._bindings = {};
    this.setBinding = function(key,element){
          this._bindings[key] = element;
    };
    this.setValue = function(key,value){
        this[key] = value;
        if(this._bindings[key]){
             this._bindings[key].innerHTML = value;
        }
    }
}

Then use it in your code:

// create a new instance of the boundArray
var test = new boundArray();
// create the HTML element to use, and add it to the DOM
var myspan = document.createElement('span');
document.body.appendChild(myspan);
// bind the HTML element to the required key in the boundArray
test.setBinding('place1',myspan);
// Now every time you set that key on the boundArray (using setValue), it will also change the innerHTML field on the element
test.setValue('place1','NY');
// You can access your information from the boundArray in the usual ways:
var somevar = test.place1;
var anothervar = test['place1'];

I have try to understand it. Up to the "setValue" it is OK, but how i change the value inside of span? — BASILIO, Jan 29 '13 at 20:45
Once you've bound the element to the boundArray with `setBinding()`, every time you set the value with `setValue()`, the innerHTML of the span is changed automatically. — Gareth Cornish, Jan 30 '13 at 07:00

Is it possible to link container to other one?

3 Answers3