재사용 가능한 구성 요소를 생성하기위한 패턴

저는 현재 장기적인 웹 응용 프로그램 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>

그리고이 있지만 작동합니다

자체가 지나치게 복잡 구성 요소, 상황의 많은 패턴이 꽤 업데이트

그래서 사람이 아직 동일한 작업을 수행하기 위해 노력하고 있습니다와 함께 깨진있다

살아있는 지옥 구성 요소를 이해하는 만드는 매혹적인? 그리고/또는 이것을 위해 작동하는 패턴을 발견 했습니까?

출처

2014-09-05 Marco de Jongh

정말 좋은 질문입니다. –

반응을 사용 해본 적이 있습니까? – TDmoneybanks

Respond.ly의 작성자가 작성한 UI Harness 프로젝트가 개발 중입니다. 그것은 사적인 순간입니다. 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) 하지만이 솔루션은 유망 해 보이지만 실제로는 그렇지 않습니다. 찾고. –

재사용 가능한 구성 요소를 생성하기위한 패턴

답변

관련 문제