2017-03-16 6 views
0

HTMLとAngularバージョンが必要なテーマを購入しましたが、私が見るのはHBSファイルだけです。 私は全体のシナリオでgrunt/express/npmの初心者です。これらのファイルから可能なHTMLバージョンを抽出する方法については迷っています。ハンドルバーテンプレートの使い方は?

Gruntfile.jsがあり、CLIで「grunt」を実行しようとしましたが、「ローカル・グラント・ファイルが見つかりません」というエラーが表示されます。 Handlebarテンプレートのような感じです。

以下はファイルの構造です。 enter image description here

、これは間違ったスタックサイトである場合enter image description here

、代わりにダウン投票の適切なものを言及してください。私はそこにそれを掲示するでしょう。前もって感謝します。

答えて

0

ハンドルバーは、Mustacheの上にあるテンプレートエンジンではなく、内部の補間変数とHTMLを見ることができます。それ。一例として、

テンプレートが埋め込まれたハンドル式で、通常のHTMLのように見える

ハンドルバー。

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

ハンドル式は{{、続いていくつかのコンテンツ、A}}おそらく、そのような等のような{{の#if}}または{{#each}}よりヘルパーを参照

、テンプレートに反復処理やその他の必要なロジックを簡単に作成できます。

Angularについて言及したように、私は角度がテンプレートエンジンとしてHandlebarのバインディングデータであると考えています。あるいは、ハンドルバーを使用するExpressアプリケーションを使用している可能性があります。

あなたがしなければならないことは、ハンドルバーのテンプレートからHTMLタグを抽出し、{{...}}を無視してコンテンツを{{..}}に置き換えることです。

グランまたはGulpやWebpackのような他のオートメーションタスクランナーでも抽出できます。しかし、より多くの努力と異なるプラグインまたは特定のコードが必要になることがあります。

HTMLスタイルシートに同じスタイルを表示するには、CSSをコピーする必要があります。

最後に重要なのは、テンプレートを抽出したり取得したりする方法がありますが、もっとも簡単なのは私の説明です。詳細についてread here

については

"ローカルイサキファイルを見つけることができません"。

1つの解決策ほど簡単ではないため、異なる問題が発生する可能性があります。ただし、(好ましくは)インストールするには、最新のイサキのバージョンが必要になります。 --save-devのはあなたのpackage.jsonにDEV-依存としてイサキを追加しますとしてヨーヨーのために働く必要があり

npm install grunt --save-dev 

。これにより、依存関係を簡単に再インストールできます。

ご希望の場合はご利用ください。

0

あなたは、私は信じているあなたのHTMLに直接含めることができます.jsファイルにそれらの.hbsファイルを変換するためにこれを使用することができます - https://github.com/yaymukund/grunt-ember-handlebars

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

こんにちは..hbsファイルでは、htmlはハンドルバーテンプレートと混在しています。最終処理/レンダリングhtmlファイルにはディストリビューションやフォルダーはありません。 –

0

ハンドルバーにHTMLを文字列として作成されることを意味セマンティックテンプレートエンジンです。基本的にハンドルバーはデータを表現するために使用されます。例えば、

JS

var context = {site : jsgyanblogspot.com }; 

ハンドルバー上で

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

は、H3有する部分がハンドルである、式{{site}}は、現在のコンテキストの値をルックアップ値jsgyanblogspot.comを取得します。

ハンドルバーの部分は、コンパイルによってHTMLに変換されます。あなたの場合は、テンプレートをプリコンパイルする必要があります。

プリコンパイル後、すべてのテンプレートファイルは単一のjsファイル(.hbsファイル=> single.js)に変換されます。

single.jsファイルにはHTMLが含まれています。プリコンパイルには、それぞれのnpmモジュールが必要です。プロジェクトディレクトリアジャイルからnpm installと入力するだけで、必要なnpmモジュールがインストールされます。

これはまだあなたの問題が解決しない場合は、プロジェクトディレクトリからイサキローカルで実行するコマンドsudo npm install grunt --save-devをインストールしようと

あなたはBest Handlebars tutorial with demo and examplesで段階的にプリコンパイルの詳細を取得することができます。

関連する問題