Question

我在这个question做同样的事情，给我的模板提供数据，编译它并使它看起来像一个文件

var file = 'data:text/html,' + encodeURIComponent(compiled);

一切看起来很好，模板成功渲染，我得到了我的数据，但现在我的标签在头部停止工作，标签如链接或脚本与src属性

这里我通过id MAZ-63171获取pouchdb中的doc并将该doc提供给我的模板：

db.get('MAZ-63171')
    .then(function(doc) {
        var compileFn = pug.compileFile('./pugTemplates/index.pug', {
            pretty: true
        });
        var compiled = compileFn({doc: doc});
        console.log(compiled);
        // console.log(doc);
        // 'file://' + __dirname + '/pugTemplates/index.pug'
        var file = 'data:text/html,' + encodeURIComponent(compiled);
        mainWindow.loadURL(file);
    })
    .catch(function(err) {
        console.log(err);
    });

index.pug中的

我有这个

doctype html
html(lang="en")
  head
    title="trucks"
    link(rel="stylesheet" href="../node_modules/semantic-ui/dist/semantic.min.css")
    //- script window.$ = window.jQuery = require('jquery');
    script(src="../node_modules/jquery/dist/jquery.min.js")
    script(src="../node_modules/semantic-ui/dist/semantic.min.js")
  body
    .ui.container
      .ui.grid
        .four.wide.column
        .eight.wide.column
          |#{doc._id}
        table.ui.celled.table
          thead
            tr
              th Header
              th Header
              th Header
          tbody
            tr
              td
                .ui.ribbon.label First
              td Cell
              td Cell
            tr
              td Cell
              td Cell
              td Cell
            tr
              td Cell
              td Cell
              td Cell

编译到这个

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>trucks</title>
    <link rel="stylesheet" href="../node_modules/semantic-ui/dist/semantic.min.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/semantic-ui/dist/semantic.min.js"></script>
  </head>
  <body>
    <div class="ui container">
      <div class="ui grid">
        <div class="four wide column"></div>
        <div class="eight wide column">MAZ-63171</div>
        <table class="ui celled table">
          <thead>
            <tr>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="ui ribbon label">First</div>
              </td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

我添加了关于css或js文件的零错误，但是语义ui无法正常工作，你可以在screenshot上看到

为什么会发生这种情况以及如何解决？我认为这是因为那些转换成字符串，也许我应该使用其他方法来编译我的模板。

来自npm的电子哈巴狗模块似乎没有从本地获取数据，它在诺言中等待它，并且在那个时候标准loadUrl将哈巴狗模板直接加载到窗口而不渲染它。也许我做错了。

电子脚本中的loadhtml而不是loadUrl并且链接不起作用

0 个答案: