用於創建可重用組件的模式

我目前正在研究一個長期的Web應用程序Meteor。隨着時間的推移開發人員會來去。所以爲了確保整個應用程序保持相同的外觀和感覺，我希望能夠使用流星的模板系統創建標準組件。因此，功能模板不應該包含任何html，這些都應該包含在組件模板中。用於創建可重用組件的模式

我試過meteor-polymer但它只是崩潰我的應用程序，它感覺我應該使用流星模板系統，而不是添加另一個庫。此外聚合物很大程度上取決於模板標記，流星也要看，所以我不太清楚

基本上我想在我的模板做的是這樣的：一個組件的

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

例子：

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

而這個工作，但：

本身過於複雜的成分，很多情況下的S魔力使得理解組件活地獄
模式已經與不少更新

因此已有人試圖做同樣的沒有碎？和/或找到一個適用於此的模式？

來源

2014-09-05 Marco de Jongh

確實是一個很好的問題！ – 2014-09-05 10:18:30

你有沒有考慮過使用反應？ – TDmoneybanks 2015-08-14 16:06:52

有一個項目正在開發中，可以做到這一點：UI Harness，來自Respond.ly的創造者。目前它是私人的。您可以從Phil Cockfield’s talk at the July 2014 Devshop（YouTube link）瞭解。從演講視頻中，如果您不想等待UI Harness的發佈，您應該瞭解如何構建自己的組件。

來源

2014-09-05 17:47:58

github上的項目已經開放它只是.com關閉的網站（https://github.com/Respondly/meteor-ui-harness）但是，這個解決方案雖然看起來很有前途，但並不完全是我尋找。 – 2014-09-08 11:56:59

用於創建可重用組件的模式

回答

相關問題