Question

例如在我的文件index.jade中，我有：

extends layout

block varScope
  -var selected = 'Home';
  -var isEmpty = 'false';
  
body
   button(onclick='changeState()') Click
  
   script.
     function changeState(){
       // change isEmpty variable here to true -- how to ?
     }

可以用javascript设置我的pug / jade变量吗？如果没有，请问我有什么选择？

Answer 1

否，您要执行的操作不可能。 Pug在服务器上运行，JavaScript在浏览器的客户端上运行。一旦在其服务器上渲染了哈巴狗模板，此过程中就不再有哈巴狗。

您可以做的是使用pug预加载变量名称：

script.
  var isEmpty = !{isEmpty};
  function changeState(){
    // change isEmpty variable here to true -- how to ?
  }

或者，如果您有一个更复杂的对象，则可以在将其传递到模板之前对其进行字符串化：

script.
  var user = !{user};
  function changeUserName(){
    user.name = ...
  }

Answer 2

好吧，我们直接知道这是不可能的，但是我找到了一种使用JS的方法。我知道这可能不是官方的正确行为，可以使用facebook-passport这样的事情，但是对于那些需要快速测试并且需要节省时间阅读新的SW模块文档的人，可以这样做：< / p>

正如我在评论中提到的那样，可以使用URL来实现。在我的服务器文件 app.js 中，我需要配置我的路由，该路由将发送给我相同的视图（以哈巴狗/玉石），该视图是通过URL从视图页面的javascript获取的变量：

app.get('/home/user/:id', function(req, res) {

  var id = req.params.id;

  // do the DB or other stuff here

  console.log('I received in the server user id from JS(FB GraphAPI): '+ id);

  app.locals.isEmpty= id

  res.redirect('/home');

});

app.get('/home', function(req, res) {

  res.render('home', { isEmpty: app.locals.id }); // or if you want send anything

});

我在 home.jade 文件中拥有此文件：

extends layout

block varScope
     -var selected = 'Home';

-var isEmpty = 'true'; // here will be setted variable from JS

body
   button(onclick='changeState()') Click

   script.
     function changeState(){
          window.location.assign("http://localhost:3000/home/user/34sfd")
     }

现在在我的home.jade中，我有来自JS的变量：

-var isEmpty = 34sfd

这样做的代价是，结果将导致手动页面刷新。

对于那些希望将此变量发送到扩展名jade / pug文件（ layout.jade ）的用户，您甚至不必将其作为对象发送，您现在可以轻松地从中进行选择一组局部变量：

-var isEmpty= locals.isEmpty

如何使用JavaScript动态更改玉器变量？

2 个答案: