Meteor.js / Handlebars.js – 了解程序编码风格和范围
我第一次使用Meteor.js框架，并且无法理解模板系统事件的顺序（从来没有使用过Handlebars.js），以及如何处理范围。
我有一个名为audio.js的文件。 在这个例子中，我定义了一个类并使用该类初始化一个variables：
// Question about this as well, how do I properly make a jQuery class? // Is this the right way? $.Audio = function() {} $.Audio.prototype = { init: function() { this.ele = $('.blahblah'); } startAudio: function() { // do things } } var Music = new $.Audio();
所以我的var Music是在audio.js创build的。
现在，在另一个js文件中，我正在做一些模板function：
Template.bars.rendered = function { Music.startAudio(); }
但是我得到一个Uncaught ReferenceError: Music is not defined从那一行Uncaught ReferenceError: Music is not defined 。
主要问题：
Meteor.js的范围如何工作？ 我怎样才能引用我的Musicvariables，我在另一个文件中的我的模板function内的一个文件中声明？
不太重要的问题 ，这可能不容易回答，因为这不是一个很好的问题。 我如何程序化地写meteor与JavaScript？ 这是我第一次使用模板工作。 我习惯于JavaScript呈现，因为它在DOM中列出（或者当DOM被加载或事件被使用侦听器触发等）。 我不明白如何使用模板在JavaScript中绑定事件的逻辑链。
从meteor文件：
名为
lib目录中的文件首先被加载。与
main.*匹配的文件在一切之后被加载。子目录中的文件在父目录中的文件之前加载，以便最深的子目录中的文件首先加载（在
lib之后），最后加载根目录中的文件（除main.*）。在目录中，文件按字母顺序按文件名加载。
另外，下面是关于导出variables的文档：
// File Scope. This variable will be visible only inside this // one file. Other files in this app or package won't see it. var alicePerson = {name: "alice"}; // Package Scope. This variable is visible to every file inside // of this package or app. The difference is that 'var' is // omitted. bobPerson = {name: "bob"};
所以，如果你想让你的music var在其他文件中可用，请执行以下操作：
-
把你的
audio.js文件放在一个lib文件夹中，比如lib/audio.js或者client/lib/audio.js。 这将确保它在其他文件之前加载。 -
不要用
var关键字声明你的musicvariables。 只要做music = new $.Audio();这会将music附加到全局范围，允许稍后加载的文件访问它。
为什么这是必要的？ meteor将所有的文件包装在一个IIFE中 。 所以，例如，如果你的文件看起来像这样：
var MyClass = function() {}; var myInstance = new MyClass();
然后meteor将这样包装文件：
(function() { var MyClass = function() {}; var myInstance = new MyClass(); })();
现在由于JavaScript的函数范围的原因，vars不能用于其他文件。 无var声明的variables被附加到全局范围，不pipe它们可能被包含在哪些函数中。
不太重要的问题，这可能不容易回答，因为这不是一个很好的问题。 我如何程序化地写meteor与JavaScript？ 这是我第一次使用模板工作。 我习惯于JavaScript呈现，因为它在DOM中列出（或者当DOM被加载或事件被使用侦听器触发等）。 我不明白如何使用模板在JavaScript中绑定事件的逻辑链。
去阅读文档。 您可以访问http://docs.meteor.com/ 。 阅读每一行 – 它会回答你可能有这样的问题。 简而言之，您可以在模板上定义事件处理函数 ，当模板中的HTML元素发生事件时将会触发这些函数 。 您也可以在模板上定义帮助函数 ，这些函数可以依赖于被动数据源，并且当这些被动数据源改变时（这将导致模板被重新渲染），它将自动重新运行。 Meteor文档的模板部分介绍了这一点。
这个想法是这样的：你的模板定义了应该为你的应用呈现的HTML结构。 这个HTML由被动数据源驱动，每次被动数据源发生变化时都会重新呈现。 这可以确保您的HTML始终与您的数据同步，但是您不必编写任何自定义的DOM操作代码！ 所以，对于一个执行顺序的简单例子：
-
使用初始值创build一个被动数据源（例如
Session，Meteor.Collection或使用Deps自己的被动数据源）。 -
取决于您的数据源的模板帮助程序函数是使用数据源的初始值执行的。
-
该模板使用模板中包含的帮助函数（
{{myHelper}}的结果进行呈现。 模板事件处理程序自动附加到生成的HTML DOM。 -
在DOM上触发一个事件，例如点击一个button。
-
事件处理程序运行。 也许这个事件处理程序会改变被动数据源。
-
帮助函数看到数据源已经改变，并自动重新运行。
-
模板的相关部分使用helper函数的新值自动重新渲染。