Может ли Метеор обрабатывать вложенные виды?

Question

Я изучаю метеор и нахожу все виды трудностей, связанных с вложенными подзонами. Поскольку приложение, которое я хочу написать, полно их ... это выглядит как сложность. Я нашел это на github, как readme для проекта Meteor, чтобы попытаться справиться с этой проблемой. «Я пару раз играю с« Метеор ». Легкость настройки и мощная реактивность делают это с тем, что я хочу придерживаться. Однако я был разочарован сложностью программной настройки, создания экземпляров, уничтожения и вложенности в виде представлений. "

Это проблема, которая может быть обработана в Метеор (без добавления большого количества сложных работ вокруг) или я должен искать другую платформу?

Answer 1

Я люблю вложенные шаблоны. Я получаю надежные результаты. Теперь я программирую библиотеку как шаблонов, так и вспомогательных функций (обычно для элементов формы), которые составляют html для меня. HTML является побочным продуктом, и файлы, которые мы называем .html, на самом деле являются DSL для javascript.

Существует много S.O. вопросы, поднятые о вставках в отсортированные списки, дающие людям проблемы. У меня не было времени смотреть.

Мое правило: Метеор (хорошо) разработан с самого начала, чтобы сделать это легко и надежно.

До сих пор сложнее было решить, когда я добавил аккордеон из фонда, и обновление документа привело к его первоначальному состоянию (будучи закрытым или одним открытым). Мне пришлось ввести код, в котором сохранен текущий раздел, и код для повторного утверждения этого в обработанном обратном вызове для используемого шаблона.

Почему бы не написать прототип гнездования с одним полем или двумя местами и найти, что вас беспокоит?

Вот пример цепи. Вы видите все вложенные шаблоны. Сам этот шаблон работает в нескольких экземплярах.

Первый шаблон: называемый «макет», предложенный железным маршрутизатором. Имеет базовую страницу и меню. Основной корпус - это выход, установленный маршрутизатором. На странице образца, маршрут требует шаблон 'доступность'

<template name='availability'> 
    {{#each myAgents}} 
    <form class="custom" id="Agent_{{_id}}" action=""> 
    <div id='availability' class="section-container accordion" data-section="accordion"> 
     <section id="services"> 
     <p class="title" data-section-title><a href="#"> 
      Your Info 
     </a></p> 

     <div class="content" data-section-content> 
      {{>services}} 
     </div> 
     </section> 
     <section id="skills"> 
     <p class="title" data-section-title><a href="#"> 
      Skills 
     </a></p> 

     <div class="content" data-section-content> 
      {{>skills}} 
     </div> 
     </section> 
     <section id="sureties"> 
     <p class="title" data-section-title><a href="#"> 
      Sureties 
     </a></p> 

     <div class="content" data-section-content> 
      {{>sureties}} 
     </div> 
     </section> 
     <section id="time"> 

     <p class="title" data-section-title><a href="#"> 
      Time Available 
     </a></p> 

     <div class="content" data-section-content> 
      {{>time}} 
     </div> 
     </section> 
     <section id="schedule1"> 

     <p class="title" data-section-title><a href="#"> 
      Schedule 1 
     </a></p> 

     <div class="content" data-section-content> 
      {{>schedule}} 
     </div> 
     </section> 
     <section id="schedule2"> 

     <p class="title" data-section-title><a href="#"> 
      Schedule 2 
     </a></p> 

     <div class="content" data-section-content> 
      {{>schedule}} 
     </div> 
     </section> 
     <section id="distance"> 

     <p class="title" data-section-title><a href="#"> 
      Distance 
     </a></p> 

     <div class="content" data-section-content> 
      {{>distance}} 
     </div> 
     </section> 
    </div> 
    </form> 
    {{/each}} 
</template> 

образца дополнительно гнездо:

<template name='services'> 
    {{label_text fname='name' title='Agent Name' placeholder='Formal Name' collection='agent' passthrough='autofocus=autofocus ' }} 
    {{label_text fname='agentInCharge' title='Agent In Charge' placeholder='Owner' collection='agent' }} 
    {{label_text fname='phone' title='Phone Number(s)' placeholder='Include Area Code'collection='agent' }} 
    {{>gps }} 

    <h4>Not shared:</h4> 
    {{label_text fname='email' title='Email:' placeholder='you remain anonymous' collection='agent' }} 

</template> 

и LABEL_TEXT является помощником, извлеченным из https://github.com/mcrider/azimuth проекта:

generateField = (options) -> 
    options.hash.uniqueId = options.hash.fieldName + "_" + Math.random().toString(36).substring(7) if options.hash.template is "wysiwyg" 
    options.hash.id = options.hash.id or @_id 
    options.hash.value = options.hash.value or this[options.hash.fname] 

    # allow for simple params as default 
    options.hash.title = options.hash.title or options.hash.fname 
    options.hash.template = options.hash.template or "label_text" 
    options.hash.placeholder = options.hash.placeholder or options.hash.title 

    # compatible with old 
    options.hash.fieldName = options.hash.fieldname or options.hash.fname 
    options.hash.label = options.hash.label or options.hash.title 

    # FIXME: Return error if type not valid template 
    new Handlebars.SafeString(Template[options.hash.template](options.hash)) 



Handlebars.registerHelper "label_text", (options) -> 
    options.hash.collection = options.hash.collection or 'generic' 
    generateField.call this, options 

Answer 2

I я довольно новичок в Meteor, но вскоре обнаружил, что мне нужны вложенные представления (например, динамические включения или подшаблоны). Я не уверен, что вы имеете в виду, но вот мое решение.

Я создал следующий Рули помощник, который может быть использован для создания суб-шаблонов:

Handlebars.registerHelper('subTemplate', function(container, property, context, options) { 
    if (container && container.hasOwnProperty(property)) { 
     var subTemplate = container[property]; 
     if (typeof subTemplate === 'function') { 
      return new Handlebars.SafeString(subTemplate(context || this)); 
     } 
     else if (typeof subTemplate === 'string') { 
      return new Handlebars.SafeString(Template[subTemplate](context || this)); 
     } 
    } 
}); 

Он может быть использован в то, что я называю общий шаблон. Например, для создания списка:

<template name="item_list"> 
    <ul class="items-list"> 
     {{#each items}} 
      <li class="listview-item"> 
       {{subTemplate .. 'listItem' this}} 
      </li> 
     {{/each}} 
    </ul> 
</template> 

Теперь ссылаясь на этот общий шаблон требует, чтобы свойство марки «ListItem» присутствует в его контексте. Это может быть либо строка с именем подшаблона, либо встроенное определение подшаблона.В приведенном ниже примере показаны оба варианта:

<template name="my_list"> 
    {{! First option, referring to the sub-template by name:}} 
    <div> 
     {{#with listData listItem="my_list_item"}} 
      {{> item_list}} 
     {{/with}} 
    </div> 

    {{! Second option, inlining the sub-template:}} 
    <div> 
     {{#with listData}} 
      {{#assignPartial 'listItem'}} 
       <span>{{name}}</span> 
      {{/assignPartial}} 
      {{> item_list}} 
     {{/with}} 
    </div> 
</template> 

<template name="my_list_item"> 
    <span>{{name}}</span> 
</template> 

Template.my_list.listData = function() { 
    return { 
     items: collections.people.find() 
    }; 
}; 

Второй вариант требует дополнительного помощника руля.

Handlebars.registerHelper('assignPartial', function(prop, options) { 
    this[prop] = options.fn; 
    return ''; 
}); 

Я сделал несколько из этих видов полезных помощников, в какой-то момент я, вероятно, разделить их на GitHub.