Express.js「グローバル」を表示

StackOverflow https://stackoverflow.com/questions/4718818

  •  12-10-2019
  •  | 
  •  

質問

Express.js（node.js）を使用していますが、「ローカル」パラメーターを介してカスタムデータを使用してビューをレンダリングできることを知っています。 （res.render("template", { locals: { foo: "bar" } });)

「グローバル」を持つ方法はありますか？ （つまり、すべてのビューがアクセスできるデータ）

私が見た view options, 、しかし、それは再帰的ではないので、私が自分のテンプレートで地元の人々を使用する場合、私が設定した地元の人々に取って代わります。

これが私のユースケースです。CSS/JSファイルをページごとに追加できるようにしたいのですが、それが私のメインレイアウトの一部です。問題は、すべてのレンダリングでこれらの配列を明示的に設定しない場合、未定義のエラーが発生しているため、テンプレートでは常に行う必要があります。 typeof css !== "undefined" ダンス。さらに、各フォームに明示的に追加する必要はない他の選択ボックスオプションリストがあります。

役に立ちましたか？

解決

Express 3のリリース以来、この質問に出くわした可能性のある人にとっては、「Dynamichelpers」という方法が存在しなくなったことは注目に値します。

代わりに、値や関数を保存できるオブジェクトとして機能し、ビューで使用できるようにするApp.locals関数を使用できます。例えば：-

// In your app.js etc.
app.locals.title = "My App";
app.locals({
    version: 3,
    somefunction: function() {
        return "function result";
    }
});

// Then in your templates (shown here using a jade template)

=title
=version
=somefunction()  

// Will output

My App
3
function result

リクエストオブジェクトにアクセスして情報をプルする必要がある場合は、単純なミドルウェア関数を書き込み、App.settings変数を使用できます。

たとえば、Connect-Flashを使用してユーザーにメッセージを提供している場合、次のようなことをするかもしれません。

app.use(function(req, res, next) {
    app.set('error', req.flash('error'));
    next();
});

これにより、テンプレート内の= settings.Errorでエラーメッセージにアクセスできます。

これらのトピックについては、ここでは少し簡単に説明しますが、 http://expressjs.com/api.html#app.locals

更新：Express 4

app.locals これで簡単なJavaScriptオブジェクトになるため、すべてのプロパティを1つずつ設定する必要があります。

app.locals.version = 3;
app.locals.somefunction = function() {
    return "function result";
}

res.locals アプリケーション全体のデータではなく、リクエスト固有のデータに使用する必要がある場合を除き、まったく同じ機能を提供します。ユーザーオブジェクトまたは設定は、一般的なユースケースです。

res.locals.user = req.isAuthenticated() ? req.user : null;
res.locals.userSettings = {
    backgroundColor: 'fff'
}

他のヒント

動的ビューヘルパーを使用して、ビュー用の「グローバル」変数を持つ方法があります。

Express.jsガイドから：

app.dynamichelpers（obj）

ダイナミックビューヘルパーを登録します。動的ビューヘルパーは、ビューがレンダリングされる前に、REQ、RES、およびサーバーインスタンスに対して評価される単純な関数です。この関数の返品値は、関連付けられているローカル変数になります。

app.dynamichelpers（{session：function（req、res）{return req.session;}}）;

すべてのビューにセッションが利用可能になり、セッションデータにsession.nameなどを介してアクセスできるようになりました。

ここでそれらの使用方法に関する実際の例を見つけることができます： https://github.com/alessioalex/nodetuts/tree/master/express_samples （node app.jsアプリを開始する）

著者が述べたように、ビューオプションを使用する実世界の例：

var app = express.createServer();

app.configure(function() {
  app.set('views', path.join(__dirname, '..', 'views'));
  app.set('view engine', 'jade');
  app.set('view options', {
    assetVersion: 1
  });

そして、私のlayout.jade（私の場合のアプリのベーステンプレート）で：

link(rel='stylesheet', href='/static/css/' + assetVersion + '/style.css')
script(src='/static/js/' + assetVersion + '/script.js')

この小さなトリックで、私は更新するだけです assetVersion 私の資産がワニスや他の場所でキャッシュされていないことを確認するための変動する1つの場所。

ソースコードを調べると、実際にこれがExpressのNeverバージョンで可能であることがわかりました。 （これまでのところ、Githubでのみ入手可能）

これを達成する最も簡単な方法は、あなたの意見のために地元の人々のデフォルトセットを表す変数を作成することです。次に、オブジェクトを受け入れ、地元の人々とマージし、マージされたオブジェクトを返す関数を作成します。

私も コンテナオブジェクトの中に私の地元のすべての人を渡します すなわち {locals:{g:{prop:val}}} だから私の見解では、私は紹介することができます g.prop それはただ戻ってきます null 未定義のエラーを投げる代わりに、設定されていない場合。

function default_page_vars(custom_vars){
    var vars = {
        footer: true,
        host: req.headers.host.split(':')[0],
        config: this.config
    };

    if(custom_vars){
        for(var k in custom_vars){
            vars[k] = custom_vars[k];
        }
    }
    return {
        g:vars
    };
}

//within your handler
response.render(view, {
    locals: default_page_vars(other_locals)
});

これは埋もれた対応ですが、ついにうまくいくようになりました。

1）これはモジュールに関する例です Connect-Flash

2）server.js/app.jsにミドルウェアを追加して追加する req に locals. 。これにより、テンプレートを呼び出すことができます request.flash() 必要なときはいつでも。これなしで、 flash() 各リクエスト/リダイレクトで消費され、目的を打ち負かします。

var app = module.exports = express()
  , flash=require('connect-flash');
app.configure(function(){
  ...
  app.use(express.session({ secret: "shhh" }));

  // Start Router
  app.use(flash());
  app.use(function(req, res, next) {
    res.locals.request = req;
    next();
  });

  app.use(app.router);
});

3）ルートを通常のようにセットアップします（これはコーヒースクリプトですが、特別なものはありません）

app.get '/home', (req, res) ->
  req.flash "info", "this"
  res.render "#{__dirname}/views/index"

4）メッセージが必要なときにrequest.flash（）を呼び出します。それらは各通話で消費されているので、それらを調整しないでください。

!!!
html
  head
    title= config.appTitle
    include partials/_styles

  body
    include partials/_scripts

    #header
      a(href="/logout") Logout CURRENTUSER
      h2= config.appTitle

    #messages
      - var flash = request.flash()
      each flashType in ['info','warn','error']
        if flash[flashType]
          p.flash(class=flashType)
            = flash[flashType]


    block content
      h1 content here

エクスプレス4

アプリケーション内でレンダリングされたテンプレート内のローカル変数にアクセスできます。

したがって、テンプレート=>テンプレートエンジンNPMがノード/Expressアプリケーションにインストールされていると仮定して地元の人を使用する場合。

まず、設定する必要があります 地元のオブジェクトを表現します カスタム変数があります app.js ファイル、複数の値が必要な場合はオブジェクトを使用できます（この投稿の場合） 

 /**
  *  Set locals object
  */

 app.locals.layoutData = { 
  site: {
      title: 'MyWebSiteTitle',
  },   
  metaTag: {
      charset: 'UTF-8',
      description: 'MyDescription',
      keywords: 'keyword-1,keyword-2,...',
      author: 'MyName',
      viewport: 'width=device-width, initial-scale=1.0'
  }
 };

次に、テンプレートファイルの値にアクセスする layout.pug （たとえば、PUGテンプレートエンジンの場合）

doctype html
html
  head
    //title
    title #{locals.layoutData.site.title}
    //Describe metadata
    meta(charset=layoutData.metaTag.charset)
    meta(name='description', content=locals.layoutData.metaTag.description)
    meta(name='keywords', content=locals.layoutData.metaTag.keywords)
    meta(name='author', content=locals.layoutData.metaTag.author)
    meta(name='viewport', content=locals.layoutData.metaTag.viewport)
  body
      block content
      br
      hr
      footer
        p All rights reserved © 2018 |  #{locals.layoutData.site.title}

でテスト 

  "dependencies": {
    "express": "^4.16.3",
    "pug": "^2.0.3"
  }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top