- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我花了很长时间试图弄清楚为什么包内的模板(来自autoform-lightstar.html
的afLightStar
)没有加载,而如果我复制并将其粘贴到我的主文件 meteor-sample.html
中,一切正常。
我刚刚发布了这个包 to atmospherejs (github 仓库: 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)
<小时/>
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>
<小时/>
meteor-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
});
}
<小时/>
packages/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: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');
});
<小时/>
packages/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>
<小时/>
packages/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"]
};
}
});
<小时/>
packages/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;
}
<小时/>
packages/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>
<小时/>
packages/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');
问题已解决......
没有错误,没有文档,通过纯粹的反复试验来解决,我喜欢这个。
关于javascript - Meteor 不加载包内的模板,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31127197/
我在尝试在 Meteor.com 上托管的经历非常复杂。 我经常收到“此网站已关闭。稍后再试。”。一开始我不知道为什么,但后来我怀疑问题是我不小心恢复了“system.users”集合造成的。我尝试在
我有点好奇,与复制 Meteor 应用程序、启动 tmux session 并仅运行 meteor 相比,Meteor Up(或其他 Meteor 应用程序部署过程,如 Modulus)是否能做任何花
我与meteor 合作创建了一个应用程序。在 meteor Meteor.methods 和 Meteor.publish 用于执行数据库操作。 I know use of Meteor method
我有一个相当大的 meteor 项目并安装了几个 meteor 包。我这样做只是为了试用一个 meteor 包,看看它是否适用于我的项目。不幸的是,在确定我不需要在我的项目中安装这些包后,我没有卸载这
对于生产为什么我应该“捆绑” meteor 应用程序而不仅仅是复制 服务器上的源使用“ meteor ”命令? 基本上有什么区别: “meteor bundle app.tar.gz”,然后安装正确版
我是 Meteor 的新手,我想知道我们如何要求用户在创建帐户时上传他的图片?我正在使用基本的 Meteor 帐户来创建用户帐户。我希望用户能够上传他的图片,并且还能够在他登录时和在我网站的登录页面上
我正在学习 Meteor Angular 2 教程。在第 6 步,我随机尝试了“ meteor 更新”,这使我的样本崩溃了。更新有效,服务器正在启动。然而,浏览器屏幕现在保持空白,并且在控制台中出现错
在我的 meteor app我需要实现表格排序。现在我正在做的是设置一个 session variable对于每个列并根据要排序的项目切换其值。 任何人都可以提出更好的选择吗? 最佳答案 我推荐 表格
我向用户发送了注册电子邮件,当他输入密码和其他详细信息时,我试图重置密码,但它抛出错误 uncaught error extpected to find a document to change 正如
我运行排行榜示例。然后我更改了 leaderboard.js 中的 names 变量(Meteor.startup 函数参数初始化的一部分)中的科学家条目之一并保存了文件。 我应该期待 meteor
我有一个 meteor 1.0 应用程序。我添加了一堆包,例如:meteor add kevohagan:ramda .但我在任何地方都找不到它。我什至无法在我的系统上找到它。 在我的项目中: $>
我有一个 meteor 移动应用程序在结构上工作;我真的需要将 View 与一些页面转换拼接在一起。 我看了iron-transitioner项目,但看起来开发已经停止? (最后一次提交 6 个月前,
我在“发现 meteor ”一书之后构建了我的第一个 meteor 添加。 但是我现在遇到了以下错误: 错误:在ian:accounts-ui-bootstrap-3 中没有找到accounts_ui
是否可以在负载均衡器后面使用 Mongodb 运行 meteor 应用程序的多个实例? 似乎如果一个应用程序的多个实例在不同的服务器上运行,那么它们就不会知道其他实例对 Mongo DB 所做的更改
我在/client/main.coffee 中的新客户端代码 Xingyun = Meteor.connect "localhost:3000" System = new Meteor.Collect
在 Meteor.publish ,使用 this.error 有什么区别并简单地抛出 Meteor.Error ? 最佳答案 this.error仅在发布方法内可用。每 the docs : Sto
假设我想在 Meteor 的后端使用与 Mongo 不同的数据库,并且还想在前端使用像 D3.js 这样的可视化库。 目前有可能吗? 如果不是我自己添加它会有多复杂? 谢谢 最佳答案 https://
我已经在 Meteor 中制作了一个 watch-as-I-type 实时聊天服务,但是我在 Meteor 中的内置元素保存功能方面遇到了麻烦。基本上,当输入的文本具有焦点时,我需要不更新当前的聊天消
我想知道 Meteor 是否可以与我的用例一起使用。 我有一个可在 App Store 上使用的移动应用程序。这个应用程序包含一个小调查,用户将在没有互联网连接的情况下做出回应。然后用户将关闭应用程序
关闭。这个问题是off-topic .它目前不接受答案。 想改善这个问题吗? Update the question所以它是 on-topic对于堆栈溢出。 8年前关闭。 Improve this q
我是一名优秀的程序员,十分优秀!