2017-10-22 16 views
-1
var templateSource = document.getElementById('result-template').innerHTML, 
    template = Handlebars.compile(templateSource), 
    resultsPlaceholder = document.getElementById('result'), 
    loginButton = document.getElementById('btn-login'); 

このコードが正確に何をしているのか分かりません。私はこのコードをhereから得て、それを私のsrcServer.jsに入れました。私はラインimport document from 'document';document libが含まれているが、以下のエラーを取得しています:私はあまりにもpackage.json内の依存関係にある文書が含まれているNode.jsアプリケーションでこのブラウザコードを実行するにはどうすればよいですか?

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

:下の行のために

/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 

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

私はこの例のファイルをオンラインで取得する予定ですか?私はここのエラーが何であるかについてはわかりません。 JFiddle例のいくつかのファイルがあります

enter image description here

は、私は自分のプロジェクトに含めることになって、そしてsrcフォルダ内に、もしそうならだろうか?

+0

@BhojendraNepal私はそれ自身を理解していません。 –

+0

そのコードはブラウザコードであり、何か有用なことを行うためにDOM内にコンテンツが必要です。それは、明らかにハンドルバーテンプレートとしてフォーマットされたページからテキストを取得し、そのテンプレートをコンパイルして(HTMLに変換して)ページ内の他の2つの要素を見つけます。 HTMLで実際に何もしません。このコードは、ブラウザで動作するように完全に設計されています。なぜnode.jsで実行しようとしていますか?あなたは何を達成しようとしていますか? – jfriend00

+0

@ jfriend00問題の理解を反映するために質問を少し修正しました。 –

答えて

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'); 

は、ここで私はそれがテンプレートエンジンであることに加えてハンドルバーのいずれかの理解がなくても起こって見るものです:

// 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が定義されていないということですか、それは文書ではないように見えます。

+1

ええ、これは私の問題をかなり解決します! –