Question

我第一次使用Meteor.js框架而且我无法理解模板系统的事件顺序（从未使用过Handlebars.js），以及如何处理范围。

我有一个名为audio.js的文件。在其中，我定义了一个类并使用该类初始化变量：

// 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内创建的。

现在，在另一个js文件中，我正在做一些模板函数：

Template.bars.rendered = function {
    Music.startAudio();
}

但我从该行得到Uncaught ReferenceError: Music is not defined。

主要问题：

在Meteor.js中如何确定范围？如何在另一个文件中引用我在Template函数中的一个文件中声明的Music变量？

不太重要的问题，这可能不容易回答，因为它不是一个非常好的问题。我如何用meteor程序性地编写javascript？这是我第一次使用模板。我习惯于javascript被渲染，因为它在DOM中列出（或者在加载DOM或使用侦听器触发事件等）。我不明白如何使用模板将javascript事件的逻辑链结合在一起。

Answer 1

来自Meteor文档：

首先加载名为lib的目录中的文件。



匹配main.*的文件会在其他所有内容后加载。



子目录中的文件在父目录中的文件之前加载，因此最先加载最深子目录中的文件（在lib之后），并且最后加载根目录中的文件（{{除外} 1}}）。



在目录中，文件按文件名的字母顺序加载。

此外，这里有一些关于导出变量的文档：

main.*

因此，如果您希望// 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"}; var在其他文件中可用，请执行以下操作：

将music文件放在lib文件夹中，例如audio.js或lib/audio.js。这将确保在其他文件之前加载它。
请勿使用client/lib/audio.js关键字声明您的music变量。只需执行var这会将music = new $.Audio();附加到全局范围，允许稍后加载的文件访问它。

为什么这有必要？ Meteor将所有文件包装在IIFE中。因此，例如，如果您的文件如下所示：

music

然后Meteor会像这样包装那个文件：

var MyClass = function() {};
var myInstance = new MyClass();

由于JavaScript的功能范围，现在(function() { var MyClass = function() {}; var myInstance = new MyClass(); })();对其他文件不可用。声明没有var的变量将附加到全局范围，无论它们可能包含在哪个函数内。

不太重要的问题，可能不容易回答，因为这不是一个非常好的问题。我如何用meteor程序性地编写javascript？这是我第一次使用模板。我习惯于javascript被渲染，因为它在DOM中列出（或者在加载DOM或使用侦听器触发事件等）。我不明白如何使用模板将javascript事件的逻辑链结合在一起。

去阅读文档。您可以在http://docs.meteor.com/访问它们。阅读每一行 - 它将回答您可能遇到的许多问题。简而言之，您可以在模板上定义事件处理函数，这些函数将在模板内的HTML元素发生时触发。您还可以在模板上定义辅助函数，这些函数可以依赖于被动数据源，并在这些被动数据源发生更改时自动重新运行（这将导致模板重新呈现））。 Meteor文档的“模板”部分对此进行了介绍。

这个想法是这样的：您的模板定义了应该为您的应用呈现的HTML结构。此HTML由响应数据源驱动，并在每次响应数据源更改时重新呈现。这可以确保您的HTML始终与您的数据同步，但您不必编写任何自定义DOM操作代码！因此，对于执行顺序的简单示例：

使用初始值创建一个被动数据源（例如，var，一个Session或您自己的使用Meteor.Collection的被动数据源）。
依赖于数据源的模板助手函数是使用数据源的初始值执行的。
使用辅助函数的结果呈现模板，该函数包含在模板中，如Deps。模板事件处理程序会自动附加到生成的HTML DOM中。
在DOM上触发事件，例如单击按钮。
运行事件处理程序。也许该事件处理程序会更改被动数据源。
帮助函数看到数据源已更改，并自动重新运行。
使用辅助函数中的新值自动重新渲染模板的相关部分。

Meteor.js / Handlebars.js - 了解程序编码风格＆amp;作用域

1 个答案: