Question

我正在学习流星，并发现处理嵌套子视图的各种困难。由于我想写的应用程序充满了它们......这看起来很难。我在github上发现了这个，作为Meteor项目的自述，试图解决这个问题。 “我已经和Meteor玩了几个星期了。设置的简易性和强大的反应性使我想要坚持这一点。然而，我对编程，实例化，破坏和嵌套子视图的难度感到沮丧。”

这是一个可以在Meteor中处理的问题（没有添加大量复杂的工作）或者我应该寻找不同的平台吗？

Answer 1

我喜欢嵌套模板。我得到了可靠的结果。我现在编写了一个包含模板和辅助函数的库（通常用于表单元素），它为我编写html。 HTML是副产品，我们称之为.html的文件实际上是一个javascript DSL。

有许多S.O.关于插入到排序列表中引发问题的问题。我没有时间看。

我的经验法则：Meteor从一开始就设计得很好而且可靠。

到目前为止，更难解决的问题是当我从基础会员中添加手风琴时，文档的刷新导致其初始状态（全部关闭，或者一个打开）。我不得不把代码放在保存当前部分的代码中，并且代码在使用它的模板的渲染回调中重新断言。

为什么不在一个或两个地方写一个嵌套原型，找到困扰你的东西？

这是一个示例链。您会看到所有嵌套模板。此模板本身在多个模块中运行。

第一个模板：称为“布局”，由铁路由器建议。有基本的页面和菜单。主体是由路由器设定的产量。在示例页面上，路径调用模板“可用性”

<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

我对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上分享它们。

Meteor可以处理嵌套视图吗？

2 个答案: