创建可重用组件的模式

Question

我目前正在开发一个长期的 Web 应用程序 Meteor。随着时间的推移，开发人员会来去去去。因此，为了确保整个应用程序保持相同的外观和感觉，我希望能够使用流星的模板系统创建标准组件。因此，功能模板不应包含任何 html，而这应全部包含在组件模板中。

我尝试过meteor-polymer，但它只是让我的应用程序崩溃，感觉我应该使用流星模板系统而不是添加另一个库。此外，聚合物很大程度上依赖于 Meteor 也依赖的模板标签，所以我不太确定

基本上我想在我的模板中做的是：

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

这可行，但是：

1. 组件本身过于复杂，大量的上下文切换使得理解组件成为一个活生生的地狱
2. 多次更新打破了这种模式

那么有人尝试过这样做吗？和/或找到适用于此的模式？

Answer 1

有一个正在开发的项目可以做到这一点：UI Harness，来自Respond.ly 的创建者。不过目前是私人的。您可以通过Phil Cockfield’s talk at the July 2014 Devshop (YouTube link) 了解它。如果您不想等待 UI Harness 的发布，您应该从演讲视频中了解如何构建自己的组件。