我如何调整此浏览器代码以在我的Node.js应用程序上运行？

Question

var templateSource = document.getElementById('result-template').innerHTML,
  template = Handlebars.compile(templateSource),
  resultsPlaceholder = document.getElementById('result'),
  loginButton = document.getElementById('btn-login');

现在我不明白这段代码究竟是做什么的。我从here获得了此代码并将其放入我的srcServer.js。我已通过第document行添加了import document from 'document'; lib，但收到以下错误：

/Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/buildScripts/srcServer.js:71
  var templateSource = _document2.default.getElementById('result-template').innerHTML,
                                          ^

TypeError: _document2.default.getElementById is not a function
    at /Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/buildScripts/srcServer.js:60:35
    at Object.<anonymous> (/Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/buildScripts/srcServer.js:14:1)
    at Module._compile (module.js:624:30)
    at loader (/Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at /Users/sharanduggirala/Documents/UID/CS235ProjectJS 4/node_modules/babel-cli/lib/_babel-node.js:159:24

以下一行：

var templateSource = document.getElementById('result-template').innerHTML

我在package.json内的依赖项中也包含了文档：

"devDependencies": {
    "document": "0.4.7",
...

我是否应该从在线示例中获取更多文件？我不确定这里的错误是什么。 JFiddle示例中有一些文件：

我是否应该将它们包含在我的项目中，如果是，请在src文件夹中？

Answer 1

var templateSource = document.getElementById('result-template').innerHTML,
template = Handlebars.compile(templateSource),
resultsPlaceholder = document.getElementById('result'),
loginButton = document.getElementById('btn-login');

这里有几件事情要发生。一个是一些简短的变量声明，所以让我们改变它，这样就更清楚了：

var templateSource = document.getElementById('result-template').innerHTML;

var template = Handlebars.compile(templateSource);

var resultsPlaceholder = document.getElementById('result');

var loginButton = document.getElementById('btn-login');

除了它是一个模板引擎之外，这是我看到的事情，而不了解Handlebars：

// find an element on your page that has id="result-template"
// look for something like <div id="result-template">
// .innerHTML takes the content from that element and preserves the HTML part of it
// there is also .innerText which would strip the HTML out
var templateSource = document.getElementById('result-template').innerHTML;

// run that content from above through a compile function
// this is probably used to help Handlebars understand the HTML
// and so Handlebars can re-render it
var template = Handlebars.compile(templateSource);

// this is simply getting an element called id="result" (ie: <div id="result">)
// once your code has this element, it can execute further logic on it
// try typing it into your console: document.getElementById('result')
// see what is displayed
// this also doesn't appear connected with the first two lines of code
var resultsPlaceholder = document.getElementById('result');

// this is also not connected to the other three lines of code.
// it is also finding an element by ID
// clearly a login button, for some reason
var loginButton = document.getElementById('btn-login');

希望这很有帮助。

您的问题似乎是document未定义，或者 文档。