Meteor 可以处理嵌套视图吗？

Question

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

这是一个可以在 Meteor 中处理的问题（无需添加很多复杂的解决方法）还是我应该寻找不同的平台？

Answer 1

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

有很多 S.O.关于插入排序列表给人们带来问题的问题。我没时间看。

我的经验法则：Meteor 从一开始就（很好地）设计为轻松可靠地做到这一点。

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

为什么不写一个只有一两个字段的嵌套原型，然后找出困扰你的地方？

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

第一个模板：称为'layout'，由铁路由器建议。有基本页面和菜单。主体是一个yield，由router设置。在示例页面上，路由调用模板“可用性”

<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是一个helper，借鉴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 上分享它们。