作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
根据另一个字段动态显示子模式(对象)的字段的最佳方法是什么?
在以下示例中,一个文档 (Schemas.Main) 可以包含在 Schemas.Items 中定义的多个项目。填写项目所需的字段取决于所选类型。
例如,如果用户选择 type=="type1",则需要填写字段 "type1_field1"和 "type1_field2"。
一个解决方案可能需要使用 autoForm 并结合 AutoForm.getFieldValue 和 afArrayField 的设置字段,对吗?我尝试了很多组合,但要么无法添加其他项目(缺少加号),要么我无法添加不同的项目(即所有项目都是 type1)。任何提示如何解决这个问题?
//Schemas.js
Schemas = {}; Collections = {};
Main = Collections.Main = new Mongo.Collection("Main");
Main.attachSchema(Schemas.Main);
Meteor.isClient && Template.registerHelper("Schemas", Schemas);
Schemas.Main = new SimpleSchema({
name: {
type: String
},
items: {
type: [Schemas.Items]
}
});
Schemas.Items = new SimpleSchema({
type: { //FormActions...
type: String,
allowedValues: ['type1', 'type2', 'type3'],
autoform: {
type: "selectize"
}
},
type1_field1: {
type: String
},
type1_field2: {
type: String
},
type2_field1: {
type: String
},
type2_field2: {
type: String
},
type3_field1: {
type: String
},
type3_field2: {
type: String
}
});
//form.html
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
{{> afFieldInput name='name'}}
{{> afArrayField name='items' fields="items.$.type, items.$.type1_field1"}} //How to set these fields dynamically depending on type?
<div class="form-group">
<button type="submit" class="btn btn-primary">Create</button>
</div>
{{/autoForm}}
最佳答案
我最终使用了另一种方法并基于 afArrayField 创建了一个自己的模板,它使用
{{> UI.dynamic template=currentFieldValue}}
Template.registerHelper("currentFieldValue", function() {
return AutoForm.getFieldValue("testForm", this.current.type) || "no type so far";
});
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
{{> afFieldInput name='name'}}
{{> afArrayField name='items' id="something" template="mycustom"}}
<div class="form-group">
<button type="submit" class="btn btn-primary">Create</button>
</div>
{{/autoForm}}
<template name="afArrayField_mycustom">
<div class="panel panel-default">
<div class="panel-heading">{{afFieldLabelText name=this.atts.name}}</div>
{{#if afFieldIsInvalid name=this.atts.name}}
<div class="panel-body has-error">
<span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
</div>
{{/if}}
<ul class="list-group">
{{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item autoform-array-item">
<div>
<div class="autoform-remove-item-wrap">
{{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
<button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span>
</button>
{{/if}}
</div>
<div class="autoform-array-item-body">
<!--all actions have a type -->
{{> afFieldInput name=this.current.type label=false options="auto"}}
<!--branch here for other fields that depend on type -->
{{> UI.dynamic template=currentFieldValue}}
</div>
</div>
</li>
{{/afEachArrayItem}}
{{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item">
<button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span>
</button>
</li>
{{/if}}
</ul>
</div>
</template>
<template name="type1">
<!--include type1 fields here-->
</template>
<template name="type2">
<!--include type2 fields here-->
</template>
<template name="type3">
<!--include type3 fields here-->
</template>
关于meteor - 自动成型 : How to dynamically show and add fields of a sub-schema depending on another field?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28993302/
我是一名优秀的程序员,十分优秀!