个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
35
4
我是 meteor 的新手，所以我希望得到关于这些功能如何工作以及我应该如何使用它们的非常基本的解释。否则，如果有一种方法更适合我希望实现的目标，我将不胜感激。
我希望实现的功能:
我有一个 Mongo 集合，其中包含分配给特定用户的文档中的数字值。
我将使用从文档中获取的值来填充宽度:xx% 在“进度条”上的某些 css 内联样式中。但我对它的另一个用途是执行某种“ react 性”功能，每当此值更改时运行，它可以根据进度条的当前值动态更新此进度条的背景颜色。认为“红色”代表低，“绿色”代表高:
元素.html:
<template name="progressBar">
<div id="progress-bar" style="width:{{curValue}}; background-color:*dynamicColor*;"></div>
</template>
元素.js:
Progress = new Mongo.Collection("progress");
Template.progressBar.helpers({
curValue: function () {
return Progress.findOne({user: Meteor.userId()}).curValue;
}
});
上述有时有效。但它似乎并不可靠，现在对我不起作用。我收到有关无法读取未定义的属性“curValue”的错误。根据我在网上的研究，这意味着我试图在集合加载之前访问该文档。但我真的找不到直接的解决方案，也无法全神贯注地思考我应该如何构建它以避免该错误。
下一个问题是观察该值的变化并运行一个函数来更改背景颜色(如果确实发生变化)。
以下是我尝试使用的一些自动运行/观察代码片段:
Session.set('currentValue', Progress.findOne({user:Meteor.userId()}).curValue);
Tracker.autorun(function(){
var currentValue = Session.get('currentValue');
updateColor(currentValue);
});
var currentValue = Progress.findOne({user:Meteor.userId()}).curValue);
var handle = currentValue.observeChanges({
changed: function (id, currentValue) {
updateColor(currentValue);
}
});
总结问题/问题:
我想在一些内联 CSS 中使用来自 mongo 数据库文档的值，并跟踪该值的变化。当值发生变化时，我希望运行一个函数来更新 div 的背景颜色。
更新
使用下面@Ethaan 的回答，我能够更正我对收集数据的订阅/模板使用。我做了更多的挖掘，对发布/订阅方法有了更深入的了解，并学习了如何在我的集合加载后的适当时间正确使用订阅回调来运行我的 Tracker.autorun 函数。我能够扩展下面给我的答案，包括一个响应式(Reactive) Tracker.autorun，它将为我运行一个函数，根据我的文档值更新我的颜色。
我最终得到的代码如下:
元素.js
if (Meteor.isClient) {
Progress = new Mongo.Collection("progress");
Template.content.onCreated(function () {
var self = this;
self.autorun(function () {
self.subscribe("progress", function(){
Tracker.autorun(function(){
var query = Progress.findOne({user: Meteor.userId()}).level;
changeColor(query);
});
});
});
});
Template.content.helpers({
value: function(){
return Progress.findOne({user: Meteor.userId()}).level;
}
});
function changeColor(value){
//run some code
}
}
if (Meteor.isServer) {
Progress = new Mongo.Collection("progress");
Meteor.publish("progress", function () {
return Progress.find({user: this.userId});
});
}
元素.html
<head>
<title>Project</title>
</head>
<body>
{{> standard}}
</body>
<template name="standard">
...
{{> content}}
</template>
<template name="content">
{{#if Template.subscriptionsReady}}
{{value}}
{{else}}
0
{{/if}}
</template>
最佳答案
that means that I am trying to access this document before the collection has loaded
看来您遇到了问题，现在让我们开始寻找一些可能的解决方案。
Meteor 1.1 版
如果您使用的是新的 meteor 1.1 版(您可以检查运行 meteor --version)
使用这个。
首先在 onCreated 函数上使用它。
Template.progressBar.onCreated(function () {
var self = this;
self.autorun(function () {
self.subscribe("Progress");
});
});
查看更多关于 subscriptionReady 的信息在文档上。现在在 HTML 上这样使用。
<template name="progress">
{{#if Template.subscriptionsReady}}
<div id="progress-bar" style="width:{{curValue}}; background-color:*dynamicColor*;"></div>
{{else}}
{{> spinner}} <!-- or whatever you have to put on the loading -->
{{/if}}
</template>
1.0.4下的Meteor
您可以在路由器上安装类似于 waitOn:function(){} 的东西
waitOn:function(){
Meteor.subscribe("Progress");
}
或因为助手是异步的，所以做这样的事情(不推荐)。
Template.progressBar.helpers({
curValue: function () {
query = Progress.findOne({user: Meteor.userId()}).curValue;
if(query != undefined){
return query;
}else{
console.log("collection isn't ready")
}
}
});
关于javascript - meteor :Tracker.autorun/observeChanges 和集合未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29443513/
35
4
0
我在尝试在 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
我是一名优秀的程序员,十分优秀！