Création de "widgets" composites Javascript/HTML

Question

Ce que je voudrais faire est de pouvoir dynamiquement un bloc de HTML autonome qui a des propriétés supplémentaires. Je ne suis pas sûr de savoir comment l'appeler, comme "widget" implique maintenant qu'il est quelque chose comme flair ou un badge à mettre sur votre blog. Je parle d'un objet JS/HTML (CSS) réutilisable, personnalisable, "composite".

Par exemple, un simple sélecteur de date.

document.body.appendChild(new DatePicker()); 

générerait

<div class="datepicker" name="..."> 
    <select class="datepicker_monthSelect"> 
     <option value="0">January</option> 
     .... 
    </select> 
    <select class="datepicker_daySelect"> 
     <option value="1">1</option> 
     .... 
    </select> 
    <select class="datepicker_yearSelect"> 
     <option value="2010">2010</option> 
     .... 
    </select> 
</div> 

et aurait des propriétés comme

var d = new DatePicker(); 
d.value = "2010-06-21"; 
d.name = "the_datepicker"; 
d.month = 5; 
d.month = "June"; 
d.day = 21; 
d.year = 2010; 

Comment cela peut-être (facilement) accompli? Quelles sont les meilleures pratiques pour cette situation?

Answer 1

J'aime l'approche MooTools de faire cela. Tout objet JavaScript peut définir une méthode toElement et vous pouvez ajouter cet objet au DOM en utilisant les wrappers de MooTools. Les wrappers interrogeront la propriété toElement sur l'objet, et si elle existe, la valeur de retour de l'appel toElement() sera ajoutée au DOM. Pour que cela fonctionne, vous devez utiliser les wrappers pour l'ajout au DOM au lieu d'utiliser appendChild directement.

function DatePicker(date) { 
    this.date = date; 
} 

DatePicker.prototype.toElement = function() { 
    // return a DOM representation of this object 
}; 

var picker = new DatePicker(); 

Voici quelques façons de s'y prendre: utiliser ce

// retrieve the DOM node directly 
document.body.appendChild(picker.toElement()); 

// use a wrapper to append, that queries toElement first 
// DOM is a function like jQuery, that wraps the given DOM 
// object with additional methods like append for querying toElement. 
DOM(document.body).append(picker); 

Bien sûr, vous pouvez toujours remplacer la méthode appendChild native, cependant, je ne recommande cela.

Par souci d'exhaustivité, c'est comme cela que vous le feriez. Utilisez une fermeture pour conserver la méthode appendChild d'origine et remplacez-la par une nouvelle méthode qui vérifie d'abord si toElement est définie et récupère la représentation de l'élément de cet objet si c'est le cas. Sinon, continuez à ajouter l'objet transmis tel quel.

(function(original) { 
    Element.prototype.appendChild = function(child) { 
     if('toElement' in child) { 
      original.call(this, child.toElement()); 
     } 
     else { 
      original.call(this, child); 
     } 
    } 
})(Element.prototype.appendChild); 

Ajouter l'objet DOM comme dans votre exemple:

document.body.appendChild(new DatePicker()); 

Answer 2

Il existe plusieurs options différentes.

Vous pourriez 'sous-classer' l'objet élément mais cela serait extrêmement inefficace car Javascript prétend être aussi peu orienté objet que possible. Cependant, l'approche que je prendrais serait de définir une fonction to_html sur la 'classe' DatePicker.

Cette méthode prendrait théoriquement les attributs du DatePicker et les utiliserait pour créer le code HTML. Et, si vous gardez ce HTML stocké dans le DatePicker, vous auriez un moyen facile de le mettre à jour et d'accéder à sa valeur si nécessaire plus loin dans le code.

Answer 3

Vous pourriez aimer vérifier knockout.composite - http://danderson00.blogspot.com.au/2012/08/introducing-knockoutcomposite.html