35

クライアントスクリプトの関数に渡す必要のあるかなり大きなオブジェクトがあります。JSON.stringifyを使用してみましたが、このアプローチでいくつかの問題が発生しました。主にパフォーマンスに関連しています。ejsでこのようなことをすることは可能ですか？

app.get('/load', function(req, res) {
    var data = {
        layout:'interview/load',
        locals: {
            interview: '',
            data: someLargeObj
        }
    };
    res.render('load', data);
});

そして、私のクライアントスクリプトでは、このオブジェクトを次のような関数に渡します。

<script type="text/javascript">
    load(<%- data %>); // load is a function in a client script
</script>

これを試してみると、どちらかが得られます

<script type="text/javascript">
    load();
</script>

また

<script type="text/javascript">
    load([Object object]);
</script>
4

5 に答える 5

87

Node.jsの場合：

res.render('mytemplate', {data: myobject});

EJSの場合：

<script type='text/javascript'>
  var rows =<%-JSON.stringify(data)%>
</script>

セキュリティに関する注意：これを使用して、ユーザーが指定したデータを含むオブジェクトをレンダリングしないでください。Little Bobby Tablesのような人が、JSON文字列を壊して実行可能タグなどを開始するサブ文字列を含めることは可能です。たとえば、Node.jsでは、これはかなり無実に見えます...

var data = {"color": client.favorite_color}

ただし、ユーザーが次のような色を入力すると、クライアント提供のスクリプトがユーザーのブラウザで実行される可能性があります。

"titanium </script><script>alert('pwnd!')</script> oxide"

ユーザー提供のコンテンツを含める必要がある場合は、Base64エンコーディングを使用したより適切な回答について、https：//stackoverflow.com/a/37920555/645715を参照してください。

于 2013-08-07T14:54:16.857 に答える
15

これが予想される動作です。テンプレートエンジンは、[オブジェクトオブジェクト]につながる文字列をオブジェクトから作成しようとしています。本当にそのようなデータを渡したいのなら、オブジェクトを文字列化することで正しいことをしたと思います。

于 2012-06-22T07:18:02.443 に答える
5

テンプレートを使用している場合は、ユーザーがサインインしているかどうかなど、テンプレートの値を取得する方がはるかに優れています。を使用して送信ローカルデータを取得できます

<script>
    window.user = <%- JSON.stringify(user || null) %>
</script>

サーバー側のコードから、ユーザーデータを送信しています。

res.render('profile', {
    user: user.loggedin,
    title: "Title of page"
});
于 2017-12-06T15:46:31.943 に答える
1

オブジェクトをejsに渡すときは、はるかに優れた方法があると考えてください。JSON.stringfyメソッドとJSON.parseメソッドを処理する必要はありません。これらは、少し注意が必要で混乱を招きます。代わりに、for inループを使用して、オブジェクトのキーを移動できます。次に例を示します。

そのような階層のようなオブジェクトがある場合

{
    "index": {
        "url": "/",
        "path_to_layout": "views/index.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "default"
            }
        ]
    },
    "home": {
        "url": "/home",
        "path_to_layout": "views/home/index.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "home"
            }
        ]
    },
    "about": {
        "url": "/about",
        "path_to_layout": "views/default.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "about"
            }
        ]
    }
}

EJS側では、このようにyourObjectをループできます。

<% if ( locals.yourObject) { %>
  <% for(key in yourObject) { %>
    <% if(yourObject.hasOwnProperty(key)) { %>
      <div> <a class="pagelist" href="<%= yourObject[key]['subkey'] %>"><%= key %></a></div>
    <% } %>
  <% } %>
<% } %>

この例では、[key]は「index」、「home」、「about」の値を取ることができ、サブキーは「url」、「path_to_layout」、「path_to_data」などの子のいずれかになります。

于 2014-11-10T08:46:30.290 に答える
-3

あなたが持っているのはこのような結果です[{'re'：'tg'}]

実際にループする必要があります。javascriptのwhileループを参照 https://www.w3schools.com/js/js_loop_while.asp

次に、フロントエンドでejsを使用してレンダリングします...私はそれを助けることができません、私はhbsを使用します

于 2018-09-12T04:58:14.523 に答える