Template for creating reusable components

I am currently working on a long-term Meteor web application. Where over time, developers will come and go. Therefore, to ensure that the entire application retains the same appearance, I would like to be able to create standard components using a meteor temperament system. Thus, function templates should not contain any html, it should all be contained in component templates.

I tried meteor-polymer , but it just crashes my application, and it seems to me that I should use the temterating system for a meteorite instead of adding another library. Also, the polymer is highly dependent on the template tag, which the Meteor also depends on, so I'm not quite sure.

Basically what I want to do in my templates is:

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

Component example:

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

And it works, but:

  • The components themselves are too complex, there are many context switches that allow the component to be understood by living hell.
  • The pattern is broken with a lot of updates

So has anyone tried to do the same? And / or found a template that works for this?

+5
source share
1 answer

Theres a project in development to do just that: UI Harness from the creators of Respond.ly . His personal at the moment. You can find out about this from Phil Cockfields says in the July 2014 issue ( YouTube link ). From the video call, you should get some ideas on how to structure your own components if you do not want to wait for the release of UI Harness.

0
source

Source: https://habr.com/ru/post/1201877/


All Articles