2017-03-06 65 views
0

我目前在說要學習CanJS與v2 tutorial教程中使用的stache文件的XML解析錯誤(v2)

中的index.html的包括以下行

<!-- CanJS application root --> 
<div id="can-main"></div> 
<script src="libs/jquery-3.1.1.js"></script> 
<script src="libs/can.jquery.dev.js"></script> 
<script src="libs/can.map.define.js"></script> 
<script src="libs/can.stache.js"></script> 
<script src="libs/can.fixture.js"></script> 
<script src="app.js"></script> 
<script src="components/tut-form/base.js"></script> 

的沒有什麼特別有app.js。 組件JavaScript文件(base.js)看起來像這樣

can.Component.extend({ 
    tag: 'tutorial-form', 
    template: can.view('components/tut-form/base.stache'), 
    viewModel: { 
    hello: 'Hello Input Component' 
    } 
}); 

而且我已經添加了標籤<tutorial-form></tutorial-form>作爲的index.html的<body>的最後一行。

現在至少FF提供了以下錯誤

XML Parsing Error: junk after document element Location: file:///path/to/tutorial/components/tut-form/base.stache Line Number 2, Column 1:

而這個文件看起來像這樣

<h3>Hello</h3> 
<h3>{{hello}}</h3> 

好吧,我想,那我只是缺少一個CanJS組件(我正在使用CanJS .zip中的文件,因爲custom download page已損壞或看起來不像本教程中所描述的那樣),如can.Componentcan.view。瀏覽器可以加載.stache文件,但我不確定場景後會發生什麼。

有沒有人有暗示我在做什麼錯在這裏?

回答

0

靜態文件服務器是我解決這個問題的方法。不要加載所有文件爲file://,可能這在FF中也不起作用(在Chrome中,你會得到一個不允許本地文件爲類似消息的跨域請求)。

我剛剛配置了一個NGINX以便爲這個小項目提供文件,現在它完美地工作了。

旁註:在index.html中添加像<tutorial-form/>這樣的自定義標籤在這種情況下不起作用。相反,您需要將此元素(一個can.Component)附加到正文中:

$('body').append(can.stache('<tutorial-form />')());