node.js - ejsを介してnode.jsからknockout.jsに引数を渡す

Question

mongodbデータを消費し、knockout.jsを使用してリストを出力するnode.jsがあります

ビューを呼び出すと、を使用してjson構造を渡します

res.render('list', { items:json });

list.ejsテンプレートページで、非表示の要素を定義しました。

<input type="hidden" id="hidden" value="<%= items %>">

そして.jsファイルで私はその値を読みました：

var json=$("#hidden").val();
var tkts=jQuery.parseJSON(json);
var vm=new AppViewModel(tkts);

まあ...それは実行されますが、私はそれを行うためのより良い方法があるはずだと思います...たとえば、隠されたhtml変数を回避する方法はありますか？

Answer 1

現在、これを行うには3つの方法を考えることができます。

1.) JavaScript コードの変数にデータを割り当てます。

<script type="text/javascript">solution1 = {"name": "solution1"}</script>

solution1

2.) 好みの要素に data-attribute を追加します。

<div id="solution2" data-value='{"name": "solution2"}'></div>

JSON.parse(document.getElementById('solution2').dataset.value)

3.) script タグを使用して、text/javascript または application/javascript とは異なるコンテンツ タイプを選択します。

<script id="solution3" type="script" type="text/json">{"name": "solution3"}</script>

JSON.parse(document.getElementById('solution3').innerHTML)

ライブデモ

http://jsfiddle.net/bikeshedder/sbjud/

個人的なメモ

退屈に聞こえるかもしれませんが、最初のオプションがおそらく最良の選択です。高速で、必要なコードをできるだけ少なくし、機能します。データを JavaScript データとしてすぐに取得できるのに、最初にデータを文字列にしたい理由がわかりません。

Answer 2

ページ全体を提供する場合は、インライン スクリプトを追加できます... もちろん、これはグローバル名前空間を汚染します。

<script>
    var tkts = <%= items %>;
</script>

このページを取得するために AJAX を使用している場合... 2 つの AJAX リクエストに分割します... 1 つはテンプレートを取得し、もう 1 つは (JSON リクエストとして) アイテムのリストを取得できます。それらは並行して実行できるため、さらに高速になる可能性があります。