用于创建可重用组件的模式

我目前正在研究一个长期的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

用于创建可重用组件的模式

回答

相关问题