2012-06-22 2 views
18

У меня есть довольно большой объект, который мне нужно передать функции в клиентском скрипте. Я попытался использовать JSON.stringify, но столкнулся с несколькими проблемами с этим подходом - в основном, с точки зрения производительности. Можно ли сделать что-то подобное в ejs?Передача объекта клиенту в node/express + 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> 
+0

'JSON.stringify' - единственный способ. –

ответ

8

Это ожидаемое поведение. Ваш механизм шаблонов пытается создать строку из вашего объекта, что приводит к [Объекту объекта]. Если вы действительно хотите передавать данные, я думаю, что вы сделали правильную вещь, стягивая объект.

+1

'JSON.stringify (someLargeObj)' – alessioalex

48

В Node.js:

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

В EJS:

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

Не могли бы вы рассказать разницу между '<% -' и '<% ='? И почему нет '' 'в конце? – gr3g

+11

'<%= x %>' интерполирует значение x непосредственно и '<%-x%>' также HTML-экранирует его, поэтому символы, подобные '<' and '>', не попадают в парсер HTML. – prototype

+1

В терминалах точки с запятой Javascript необязательны, но, вероятно, лучше включить их. – prototype

-1

Подумайте, есть гораздо лучший способ при переходе объекта к EJS, вы не должны иметь дело с JSON. stringfy и JSON.parse, они немного сложны и запутанны. Вместо этого вы можете использовать для в петле путешествовать ключи от ваших объектов, например:

, если у вас есть объект, как такая иерархия

{ 
    "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> 
    <% } %> 
    <% } %> 
<% } %> 

Для этого примера [ключ] может принять «индекс», «дом» и «о» ценностях и подключ может быть любой из его детей, таких, как «URL», «path_to_layout», «path_to_data»

1

Если вы используете шаблоны, то было бы гораздо лучше получить значения в шаблоне, например, был ли пользователь подписан или нет. Вы можете получить локальные данные отправки, используя

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

С кода на стороне сервера вы отправляете данные пользователя.

res.render('profile', { 
    user: user.loggedin, 
    title: "Title of page" 
}); 
Смежные вопросы