Question

我一直在努力弄清楚为什么没有加载包中的模板（afLightStar中的autoform-lightstar.html），而如果我将其复制并粘贴到meteor-sample.html，我的主文件，一切正常。

我刚刚发布了这个包to atmospherejs（github repo：https://github.com/geeksys/autoform-lightstar）。

> meteor create meteor-sample
> cd meteor-sample
> meteor add aldeed:simple-schema@1.3.3
> meteor add aldeed:autoform@5.3.0
> meteor add aldeed:collection2
> meteor add geeksys:autoform-lightstar (or git clone it to packages/ for tweaks)

流星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>

流星sample.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
  });
}

包/自动窗体-光大/ 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:autoform@5.0.0',
    'templating@1.0.0'
  ]);

  api.addFiles([
    'images/star-off.svg',
    'images/star-on.svg',
    'autoform-lightstar.css',
    'autoform-lightstar.js',
    'autoform-lightstar.html'
  ], 'client');
});

包/自动窗体-光大/自动窗体-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>

包/自动窗体-光大/自动窗体-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"]
    };
  }
});

包/自动窗体-光大/自动窗体-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;
}

包/自动窗体-光大/图像/星形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>

包/自动窗体-光大/图像/星形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>

任何帮助表示感谢。

Answer 1

更改顺序：

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');

解决了这个问题..........

没有错误，没有文档，纯粹的反复试验解决了，我喜欢这个。

Meteor不会在包内加载模板，为什么？

1 个答案: