我很努力地试图弄清楚为什么未装入包（afLightStar中的autoform-lightstar.html）中的模板的原因，而如果将其复制并粘贴到主文件meteor-sample.html中，则一切正常。
我刚刚发布了此软件包to atmospherejs（github存储库：https://github.com/geeksys/autoform-lightstar）。
> meteor create meteor-sample
> cd meteor-sample
> meteor add aldeed:[email protected]
> meteor add aldeed:[email protected]
> meteor add aldeed:collection2
> meteor add geeksys:autoform-lightstar (or git clone it to packages/ for tweaks)
meteor-sample.html：
<head>
<title>meteor-sample</title>
</head>
<body>
<div>
{{#each data}}
{{star}}
{{/each}}
</div>
{{> insertDataForm}}
</body>
<template name="insertDataForm">
{{#autoForm collection="Data" id="insertDataForm" type="insert"}}
<fieldset>
<legend>Add Stuff</legend>
{{> afQuickField name='star'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
流星样品.js：
Data = new Mongo.Collection("data");
Data.attachSchema(new SimpleSchema({
'star': {
type: Number,
autoform: {
type: "lightstar",
label: false
}
}
}));
if (Meteor.isClient) {
Template.body.helpers({
data: function () {
return Data.find();
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
包/autoform-lightstar/package.js：
Package.describe({
summary: 'AutoForm input type for light star rating',
version: '0.0.1',
name: 'geeksys:autoform-lightstar',
git: 'https://github.com/geeksys/autoform-lightstar.git',
documentation: null
});
Package.onUse(function(api) {
api.versionsFrom('1.1.0.2');
api.use([
'aldeed:[email protected]',
'[email protected]'
]);
api.addFiles([
'images/star-off.svg',
'images/star-on.svg',
'autoform-lightstar.css',
'autoform-lightstar.js',
'autoform-lightstar.html'
], 'client');
});
软件包/autoform-lightstar/autoform-lightstar.html：
<template name="afLightStar">
<div class="af-lightstar" {{dsk}}>
{{#each this.items}}
<input type="radio" id="{{this._id}}" value={{this.value}} {{atts}}>
<label for="{{this._id}}">{{this.label}}</label>
{{/each}}
</div>
</template>
软件包/autoform-lightstar/autoform-lightstar.js：
AutoForm.addInputType("lightstar", {
template: "afLightStar",
valueOut: function () {
return this.find('input[type=radio]:checked').val();
},
contextAdjust: function (context) {
context.items = [];
for(var i = 0; i < 5; i++) {
context.items[4 - i] = {
name: context.name,
label: (i + 1).toString(),
value: i + 1,
_id: context.atts.id + '_' + (i + 1).toString(),
selected: (i + 1 === context.value),
atts: _.omit(context.atts, 'id')
};
}
return context;
}
});
Template.afLightStar.helpers({
atts: function selectedAttsAdjust() {
var atts = _.clone(this.atts);
if (this.selected) {
atts.checked = "";
}
// remove data-schema-key attribute because we put it
// on the entire group
delete atts["data-schema-key"];
return atts;
},
dsk: function dsk() {
return {
"data-schema-key": this.atts["data-schema-key"]
};
}
});
软件包/autoform-lightstar/autoform-lightstar.css：
.af-lightstar:not(old){
display : inline-block;
width : 7.5em;
height : 1.5em;
overflow : hidden;
vertical-align : bottom;
}
.af-lightstar:not(old) > input{
margin-right : -100%;
opacity : 0;
}
.af-lightstar:not(old) > label{
display : block;
float : right;
position : relative;
background : url('/packages/geeksys_autoform-lightstar/images/star-off.svg');
background-size : contain;
}
.af-lightstar:not(old) > label:before{
content : '';
display : block;
width : 1.5em;
height : 1.5em;
background : url('/packages/geeksys_autoform-lightstar/images/star-on.svg');
background-size : contain;
opacity : 0;
transition : opacity 0.2s linear;
}
.af-lightstar:not(old) > label:hover:before,
.af-lightstar:not(old) > label:hover ~ label:before,
.af-lightstar:not(:hover) > :checked ~ label:before{
opacity : 1;
}
软件包/autoform-lightstar/images/star-off.svg：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fill="#fff" stroke="#ccc" d="M 12,2.5 14.4,9.5 21.5,9.5 15.8,13.75 18.5,21.5 12,16.625 5.5,21.5 8.2,13.75 2.5,9.5 9.6,9.5 z"/>
</svg>
软件包/autoform-lightstar/images/star-on.svg：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fill="#ffd700" stroke="#ccac00" d="M 12,2.5 14.4,9.5 21.5,9.5 15.8,13.75 18.5,21.5 12,16.625 5.5,21.5 8.2,13.75 2.5,9.5 9.6,9.5 z"/>
</svg>
任何帮助表示赞赏。
最佳答案
更改顺序：
api.addFiles([
'images/star-off.svg',
'images/star-on.svg',
'autoform-lightstar.css',
'autoform-lightstar.js',
'autoform-lightstar.html'
], 'client');
至
api.addFiles([
'images/star-off.svg',
'images/star-on.svg',
'autoform-lightstar.css',
'autoform-lightstar.html',
'autoform-lightstar.js'
], 'client');
解决了这个问题。
没有错误，没有文档，通过纯正的尝试和错误解决了，我喜欢这个。