Muster zum Erstellen von wiederverwendbaren Komponenten

Question

Ich arbeite derzeit an einer langfristigen Webanwendung Meteor. Wo im Laufe der Zeit Entwickler kommen und gehen. Um sicherzustellen, dass die gesamte Anwendung das gleiche Erscheinungsbild behält, möchte ich in der Lage sein, Standardkomponenten mit dem Meteortemplatsystem zu erstellen. Daher sollten die Feature-Vorlagen kein HTML enthalten, das sollte in den Komponentenvorlagen enthalten sein.

Ich habe versucht meteor-polymer, aber es stürzt nur meine Anwendung und es fühlt sich an wie ich sollte das Meteortemplating-System anstelle einer anderen Bibliothek verwenden. Auch Polymer hängt stark von dem Template-Tag, den Meteor hängt auch davon ab, also ist ich nicht ganz sicher,

Im Grunde, was ich will in meinen Vorlagen tun, ist dies:

<template name="someRandomFeature"> 
    {{#_RadioGroup name="dataInput" context=. formData=formData}} 
     {{#_setLabel}}Test set{{/_setLabel}} 
     {{#_addRow}} 
      {{assignValues value="random"}} 
      {{#_setCaption}}Random{/_setCaption}} 
     {{/_addRow}} 
     {{#_addRow}} 
      {{assignValues value="expression"}} 
      {{#_setCaption}}Expression: {{_TextInput name="testSetExpression" inline=true}}{{/_setCaption}} 
     {{/_addRow}} 
    {{/_RadioGroup}} 

    {{#_FormGroup}} 
     {{#_Config}} 
      {{assignValues numRows=2}} 
     {{/_Config}} 

     {{#_setRow 0}} 
      {{#_SetLabel}}Number of tests{{/_SetLabel}} 
      {{#_setStageContent}} 
       {{> _DropDown name="numberOfTests" items=numberOfTestsList formData=formData}} 
      {{/_setStageContent}} 
     {{/_setRow}} 

     {{#_setRow 1}} 
      {{#_SetLabel}}To email address{{/_SetLabel}} 
      {{#_setStageContent}} 
       {{> _TextInput name='respondentSelection' formData=formData}} 
       <span class="help-block text-left">Send all test mails to this email adress</span> 
      {{/_setStageContent}} 
     {{/_setRow}} 
    {{/_FormGroup}} 
</template> 

Beispiel einer Komponente:

<template name="_FormGroup"> 
{{#with numRows=0 context=. formdata=formdata stage='config'}} 
    {{#with execBlock UI.contentBlock}} 
     <div class="form-group"> 
      {{#each getRows}} 
       {{#unless ../disableLabels}} 
        <label class="control-label"> 
         {{#with _constructStageList 1='rows' 2=_id 3='label'}} 
          {{> UI.contentBlock stage=this stageContext=../../context}} 
         {{/with}} 
        </label> 
       {{/unless}} 

       <div class="row{{#unless ../disableLabels}} controls{{/unless}}"> 
        <div class="{{#if ../fullWidth}}col-md-16{{else}}col-md-8{{/if}}"> 
         {{#with _constructStageList 1='rows' 2=_id 3='content'}} 
          {{> UI.contentBlock stage=this stageContext=../../context}} 
         {{/with}} 
        </div> 
       </div> 
      {{/each}} 
     </div> 
    {{/with}} 
{{/with}} 
</template> 

Und das funktioniert aber:

1. die Komponenten selbst zu kompliziert sind, viele Kontext s witching, die versucht hat, noch das gleiche zu tun jemand also mit ganz wenigen Updates eine lebende Hölle
2. Das Muster gebrochen hat

Begreifen die Komponente macht? Und/oder ein Muster gefunden, das dafür funktioniert?

Answer 1

Es gibt ein Projekt in der Entwicklung, genau dies zu tun: UI Harness, von den Machern von Respond.ly. Im Moment ist es privat. Sie können darüber von Phil Cockfield’s talk at the July 2014 Devshop (YouTube link) erfahren. Aus dem Video des Vortrags sollten Sie einige Ideen bekommen, wie Sie Ihre eigenen Komponenten strukturieren können, wenn Sie nicht auf die Veröffentlichung von UI Harness warten wollen.