我正在学习流星,并发现处理嵌套子视图的各种困难。由于我要编写的应用程序充满了它们……这看起来很困难。我在 github 上找到了这个,作为 Meteor 项目的自述文件,试图解决这个问题。“我已经用 Meteor 玩了几个星期了。易于设置和强大的反应性使我想坚持下去。然而,我对以编程方式配置、实例化、破坏和嵌套子视图的困难感到沮丧。”
这是一个可以在 Meteor 中处理的问题(无需添加很多复杂的解决方法)还是我应该寻找不同的平台?
我正在学习流星,并发现处理嵌套子视图的各种困难。由于我要编写的应用程序充满了它们……这看起来很困难。我在 github 上找到了这个,作为 Meteor 项目的自述文件,试图解决这个问题。“我已经用 Meteor 玩了几个星期了。易于设置和强大的反应性使我想坚持下去。然而,我对以编程方式配置、实例化、破坏和嵌套子视图的困难感到沮丧。”
这是一个可以在 Meteor 中处理的问题(无需添加很多复杂的解决方法)还是我应该寻找不同的平台?
我喜欢嵌套模板。我得到可靠的结果。我现在编写了一个包含模板和帮助函数(通常用于表单元素)的库,它们为我编写了 html。HTML 是副产品,我们称之为 .html 的文件实际上是 javascript DSL。
有很多关于插入排序列表的问题,会给人们带来问题。我没时间看。
我的经验法则:Meteor 从一开始就(很好)设计为轻松可靠地做到这一点。
到目前为止,更难解决的问题是当我从基础添加一个手风琴时,文档的刷新导致其初始状态(全部关闭,或一个打开)。我必须将代码放入保存当前部分的代码中,并在使用它的模板的渲染回调中重新声明该代码。
为什么不写一个只有一两个字段的嵌套原型,然后找出困扰你的地方呢?
这是一个示例链。您会看到所有嵌套模板。这个模板本身在多个内运行。
第一个模板:称为“布局”,由铁路由器建议。有基本页面和菜单。主体是一个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 是一个助手,从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
我对 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 上分享它们。