problème POO JavaScript

Question

Je créer des fenêtres comme ceci:

var obj = document.createElement('div'); 
obj.className = 'window'; 
obj.style.width = 300 + 'px'; 
obj.style.height = 200 + 'px'; 
obj.style.left = 30 + 'px'; 
obj.style.top = 200 + 'px';  

//and so on 

et ce que je dois est d'attacher des données à chaque fenêtre. Les données seront saisies via Ajax et affichées dans les fenêtres. Comment dois-je faire pour que chaque fenêtre conserve ses propres données uniques?

Je n'ai pas besoin d'afficher toutes les données à chaque fois et ces données devraient être organisées avant d'être affichées, donc je ne peux pas simplement les ajouter avec innerHTML. J'ai besoin d'un moyen de le tenir quelque part où je pourrais facilement l'obtenir et ensuite l'afficher avec innerHTML.

Answer 1

Une conjecture sauvage -

obj.data = 'Whatever' 

Et plus tard

obj.innerHTML = format(obj.data); 

J'ai essayé dans ma console Firebug, il a travaillé. Peut-être utile d'essayer dans d'autres?

Answer 2

Il suffit d'utiliser

obj.data = yourData; 

pour obtenir les données utilisent obj.data

Answer 3

Pouvez-vous utiliser jQuery? jQuery a quelque chose appelé data donc dans votre exemple, vous pouvez faire:

var obj = $('<div></div>'); 
obj.addClass('window'); 
obj.data('foo', 'setting some data here'); 

vous pouvez accéder à vos données plus tard avec:

obj.data('foo') // will return 'setting some data here' 

Answer 4

Vous pouvez construire votre propre constructor function pour créer vos propres objets fenêtre et stocker l'élément DOM et les données sur chaque instance, par exemple:

function MyWindow (width, height /*, ...*/) { 
    var data = {}; // here the data will be stored 
    // the DOM element 
    this.element = document.createElement('div'); 
    this.element.className = 'window'; 
    //... 
    // a method for get and set key/value pairs: 
    this.data = function (key, value) { 
    if (typeof value == 'undefined') { 
     return data[key]; 
    } else { 
     data[key] = value; 
     return this; 
    } 
    }; 
} 

MyWindow.prototype.sharedMethod = function() { 
// shared across all instances, you can access here public members 
// like the `this.data` method and the `this.element` DOM element 
}; 

Exemple us âge:

var win1 = new MyWindow(300, 200); 
win1.data('key1', 'value1').data('key2', 'value2'); // chainable method :) 

// to access the DOM element: 
win1.element; 

// to get the values 
win1.data('key1'); // "value1" 
win1.data('key2'); // "value2" 

var win2 = new MyWindow(300, 200); 
win2.data('someData', {foo: 'bar', baz: true}); 
win2.data('someData').foo; // "bar"