如何使用車把模板？

我買了一個主題，期望它有HTML和Angular版本，但我看到的都是HBS文件。我是新手到grunt/express/npm整個場景，我迷失在如何從這些文件中提取可能的html版本。如何使用車把模板？

有一個Gruntfile.js和我嘗試在CLI上運行「grunt」，但我得到一個錯誤說「無法找到本地grunt文件」。感覺就像是某種手柄模板。

以下是文件結構。

如果這是錯誤的堆放場，而不是反對投票請註明正確的一個。我會在那裏發佈。先謝謝你。

來源

2017-03-16 Ela Buwa

手把不是什麼，而是一個在Mustache之上的模板引擎，這意味着可以看到HTML以及內部的插值變量。那。

舉個例子

把手模板看起來像普通的HTML，嵌入式把手錶達式。

<div class="entry"> 
    <h1>{{title}}</h1> 
    <div class="body"> 
    {{body}} 
    </div> 
</div>

甲車把表達式是一個{{，一些內容，然後進行}}

你可能看到更多的助手如{{的#if}}或{{#each}}和等所以可以很容易地迭代或在模板中使用其他必要的邏輯。因此，正如你所提到的Angular，我假設angular是綁定數據，以Handlebar作爲模板引擎，或者，你可能有使用Handlebar的Express應用程序。

您需要做的是從句柄模板中提取HTML標籤，並忽略{{...}}，然後用{{..}}適當替換您的內容。

即使使用Grunt或其他自動化任務運行者（如Gulp或Webpack）也可以進行提取。但是，它可能需要更多的努力和不同的插件或特定的代碼。

請記住，您還需要複製CSS才能看到HTML樣式表的樣式。

最後但並非最不重要，還有其他方法可以提取或獲取模板運行，但最簡單的方法就是我所解釋的。

欲瞭解更多信息read here

關於：

「無法找到本地咕嚕文件」。

它不像一個解決方案那樣容易，可能會有不同的問題。但是，您將需要安裝（最好）的最新版本咕嚕：

npm install grunt --save-dev

應該喲工作作爲--save-dev的將作爲DEV-依賴咕嚕添加到您的package.json 。這可以很容易地重新安裝依賴關係。

希望它適合你。

來源

2017-03-16 06:24:06 Majid

您可以使用此轉換那些.hbs文件，.js文件，你可以直接包含到你的HTML我相信 - https://github.com/yaymukund/grunt-ember-handlebars

grunt.initConfig({ 
    ember_handlebars: { 
    all: { 
     src: 'src/templates/**/*.hbs', 
     dest: 'output/javascripts/templates.js' 
    } 
    } 
});

來源

2017-03-16 06:24:29 Konda

Hi..with在hbs文件中，它是HTML與車把模板混合在一起。沒有最終處理/呈現html文件的分發或文件夾。 –

把手是語義模板引擎，這意味着你的HTML作爲字符串創建。把手基本上用來表示你的數據。例如，

var context = {site : jsgyanblogspot.com };

把手

<h3>{{site}}</h3>

在上面，與H3是車把的部分，所述表達{{site}}查找在當前上下文中的值並獲取價值jsgyanblogspot.com。

句柄部分通過編譯轉換爲HTML，在你的情況下，你需要預編譯模板。

預編譯之後，所有模板文件將被轉換爲單個js文件（.hbs文件=> single.js）。

您的single.js文件包含HTML。您需要各自的npm模塊進行預編譯，只需從項目目錄中鍵入agile，即安裝所需的npm模塊。

如果這仍然沒有解決您的問題，嘗試安裝咕嚕從本地項目目錄

執行命令sudo npm install grunt --save-dev你可以在Best Handlebars tutorial with demo and examples預編譯一步一步的細節。

來源

2018-03-04 04:38:31

如何使用車把模板？

回答

相關問題