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

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模块文档的人，可以这样做：

正如我在评论中提到的那样，可以使用URL来实现。 在我的服务器文件app.js中，我需要配置路由，该路由将发送到同一视图（以pug / jade表示）的变量，该变量是通过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