翡翠变量渲染答案

【问题标题】：Jade variable rendering翡翠变量渲染
【发布时间】：2014-03-22 16:30:47
【问题描述】：

各位，我将如何访问我在脚本中设置的变量。 ?

#someModal.modal.fade.large
 .modal-dialog(style="width:70%")
    .modal-content
        .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') &times;
            h2.modal-title #{someVariable}
        .modal-body
            h3
               ...

script.
    | var someVariable = #{someVariable};

script.
    $('body').on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
    });

【问题讨论】：

标签： javascript node.js twitter-bootstrap pug

【解决方案1】：

在您的页面加载之前，您的脚本不会开始运行，因此翡翠将永远无法访问客户端上设置的变量。您应该改用 jQuery 来修改 HTML 元素。

script.
    var $modal = $('#someModal')
      , $title = $modal.find('.modal-title');
    $modal.on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
        $title.text(someVariable);
    });

    $modal.modal();

【讨论】：

这行得通，谢谢！问题，$('body').on('show.bs.modal' 和 $('modal').xxx 有什么区别
如何找到文本并将其放入span.label.label-info Email | ？ :)
当您在一个元素上调用 .modal() 时，只有该元素能够侦听与该模式关联的事件（请参阅源代码的 line 46 以查看 show.bs.modal 事件的确切位置被解雇）。

【解决方案2】：

我通常使用的解决方法是将变量附加到窗口：

#someModal.modal.fade.large
 .modal-dialog(style="width:70%")
    .modal-content
        .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') &times;
            h2.modal-title #{someVariable}
        .modal-body
            h3
               ...
script
  | var someVariable = #{someVariable};
script.
    $('body').on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
    });

请注意，如果变量是Object（或Array），则需要JSON.stringify。

【讨论】：

太棒了！谢谢！我会将您的代码放在哪里......在玉块或javascript块中？您介意将您的解决方案添加到我上面的代码中吗？我是前端开发的超级新手。
你想在已经存在的脚本标签之前添加这个脚本标签。
此答案仅在您已经将变量保存在服务器上但想在客户端访问它时对您有所帮助。