2

現在、Jade/Express で構築された Web サイトを数週間使用しています。私は最近、ウェブサイトの画像フォルダーを整理して、すべての画像をいくつかのフォルダーに分けて、使いやすく、整理しやすくしました。

画像 (およびその他のそのようなファイル) の階層を簡単に変更できるようにするために、ファイル パスのグローバルを含むスクリプトを作成しました。ここで、スクリプトを実行して、jade テンプレート内の関数を呼び出してこれらのグローバルを自動的に使用できるようにしようとしています。

例えば。画像は複数のフォルダに分類されるようになりました:

ファイル階層

img/
    glyphs/
    interactivity/
        buttons/
    ...

パス マネージャー スクリプトで、次のような関数をいくつか作成しました。

中: path-manager.js

 images_root_path = "/img/";
 glyph_path = images_root_path + "glyphs/";
 function getGlyph(color, name) {
     return glyph_path + color + "/" + name;
 }

テンプレートの前にスクリプトを実行するために、いくつかの方法を試しました。これが試みの1つです：

page.jade内

include ../../../public/js/lib/path-manager.js
=NamespacePathManager();

上記は、理論的には js を含めることになっています。次に、以下の名前空間を実行して関数を使用できるようにしますが、機能していません。

これは、関数を使用したい Jade テンプレートの一部です。

スクリプトインクルード 後のpage.jade

span.challenge-time
   img(src=getGlyph("black","stopwatch.png"), style="margin-right:5px;")

上記の例では、「/img/glyphs/black/stopwatch.png」が返されます。

問題は、私がサーバー側で jade テンプレートを利用できるようにしようとしているスクリプトが、jade テンプレートがレンダリングされる前に実行されていないことだと思います。これを機能させるために私が試みたすべてのことは、サーバーが関数getGlyphを認識しない、または名前空間関数NamespacePathManagerの使用を開始したときに、常にエラーになります。

概要: jade テンプレートを Web ページにレンダリングする前に JavaScript ファイルを実行して、サーバー上のその JavaScript から関数と変数を呼び出して、jade テンプレートのレンダリング中に使用できるようにします。私の問題は、私が試したすべてのメソッドが、Jade がレンダリングされる前に JavaScript を実行できないことです。

更新 私が見つけた1つの回避策は、jadeを含むページのバッファリングされていないコードにjavascriptを直接配置することでした。これは私が探していたエレガントなソリューションではありませんが、今のところ機能します

- some code
- more code

このコードはインラインで実行されます。欠点は、一度だけ含めてどこでも機能を利用できるようにするのではなく、すべてのページに手動で含める必要があることです。

4

1 に答える 1

2

ビューでアクセスできるヘルパーメソッドを Express に登録できます。

したがって、あなたの場合、path-manager.jsは、登録するヘルパー ファイルにすることができ、以下が含まれます。

var images_root_path = "/img/";
var glyph_path = images_root_path + "glyphs/";

exports.helpers = {
  getGlyph: function (color, name) {
    return glyph_path + color + "/" + name;
  }

  // Other helper methods here..
};

次に、エクスプレスサーバーをセットアップするときに、ヘルパーを登録します

var app = express.createServer();

// app.configure here...
//   app.use ...

app.helpers(require('./path-manager.js').helpers);

// Routes set up here ..

最後に、次のように Jade ビューからヘルパー メソッドを呼び出すことができます。

span.challenge-time
  img(src='#{getGlyph("black","stopwatch.png")}', style='margin-right:5px;')

このトピックについては、DailyJS http://dailyjs.com/2011/01/03/node-tutorial-8/に良い記事があります。

于 2012-05-04T08:57:55.547 に答える