Jade mixins 无法从外部文件中工作

Question

我已将 jade mixin 代码放在一个单独的文件中，并在实际的 jade 文件中要求该文件。 但是mixin没有被导入。 只有当 mixin 代码放在同一个文件中时它才有效。

错误是：

TypeError: /home/rishabh/Documents/my_projects/getting_MEAN/loc8r/app_server/views/location-info.jade:13
    11|         .col-xs-12.col-sm-6
    12|           p.rating
  > 13|             +outputRating(location.rating)
    14|           p= location.address
    15|           .panel.panel-primary
    16|             .panel-heading

jade_mixins.outputRating is not a function
    at eval (eval at exports.compile (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:172:8), <anonymous>:159:28)
    at eval (eval at exports.compile (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:172:8), <anonymous>:678:22)
    at res (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:173:38)
    at Object.exports.render (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:269:10)
    at Object.exports.renderFile (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:305:18)
    at View.exports.renderFile [as engine] (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/jade/lib/jade.js:290:21)
    at View.render (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/view.js:76:8)
    at Function.app.render (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/application.js:502:10)
    at ServerResponse.res.render (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/response.js:777:7)
    at Object.module.exports.locationInfo [as handle] (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/app_server/controllers/locations.js:34:9)
    at next_layer (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/route.js:103:13)
    at Route.dispatch (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/route.js:107:5)
    at /home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/index.js:195:24
    at Function.proto.process_params (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/index.js:251:12)
    at next (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/index.js:189:19)
    at next (/home/rishabh/Documents/my_projects/getting_MEAN/loc8r/node_modules/express/lib/router/index.js:166:38)

我使用的 mixin 如下。 我将 int 保存在一个单独的文件中，然后在必须使用它的 jade 文件中要求它。

mixin outputRating(rating)
- for (var i = 1; i <= rating; i++)
span.glyphicon.glyphicon-star
- for (i = rating; i < 5; i++)
span.glyphicon.glyphicon-star-empty

实际使用该 mixin 的 jade 布局文件如下。 当 mixin 直接放在文件中时，它可以工作，但是当从外部文件引用时，它会显示上面的错误。

extends layout

include _includes/sharedHTMLfunctions

block content
  .row.page-header: .col-lg-12
      h1= pageHeader.title
  .row
    .col-xs-12.col-md-9
      .row
        .col-xs-12.col-sm-6
          p.rating
            +outputRating(location.rating)
          p= location.address
          .panel.panel-primary
            .panel-heading
              h2.panel-title Opening hours
            .panel-body
              each time in location.openingTimes
                p
                  | #{time.days} :
                  if time.closed
                    | closed
                  else
                    | #{time.opening} - #{time.closing}
          .panel.panel-primary
            .panel-heading
              h2.panel-title Facilities
            .panel-body
              each facility in location.facilities
                span.label.label-warning
                  span.glyphicon.glyphicon-ok
                  |  #{facility}
                |  
        .col-xs-12.col-sm-6.location-map
          .panel.panel-primary
            .panel-heading
              h2.panel-title Location map
            .panel-body
              img.img-responsive.img-rounded(src="http://maps.googleapis.com/maps/api/staticmap?center=#{location.coords.lat},#{location.coords.lng}&zoom=17&size=400x350&sensor=false&markers=#{location.coords.lat},#{location.coords.lng}&scale=2")
      .row
        .col-xs-12
          .panel.panel-primary.review-panel
            .panel-heading
              a.btn.btn-default.pull-right(href="/location/review/new") Add review
              h2.panel-title Customer reviews
            .panel-body.review-container
              each review in location.reviews
                .row
                  .review
                    .well.well-sm.review-header
                      span.rating
                        +outputRating(review.rating)
                      span.reviewAuthor #{review.author}
                      small.reviewTimestamp #{review.timestamp}
                    .col-xs-12
                      p !{(review.reviewText).replace(/\n/g, '<br/>')}
    .col-xs-12.col-md-3
      p.lead #{location.name} #{sidebar.context}
      p= sidebar.callToAction

Answer 1

这可能应该是评论而不是答案，但是我没有特权发表评论，所以希望没有贬低。

您是否可能将它放在与 jade/pug 文件不同的目录中？ 请指定两个文件放置在哪个文件夹目录下的文件位置。

Answer 2

当然，我想我有点晚了，你不再需要帮助了，但也许其他人会需要它:)

问题是您以错误的方式编写了一个 mixin 函数。 在玉文件中，您不应该忘记缩进。

错误版本：

mixin outputRating(rating)

-for (var i = 1; i <= rating; i++)
span.glyphicon.glyphicon-star

-for (i = rating; i < 5; i++)
span.glyphicon.glyphicon-star-empty

正确版本：

mixin outputRating(rating)

   -for (var i = 1; i <= rating; i++)
      span.glyphicon.glyphicon-star
    enter code here

   -for (i = rating; i < 5; i++)
      span.glyphicon.glyphicon-star-empty

Answer 3

我认为您的包含不正确，请尝试

include ./_includes/sharedHTMLfunctions

或者

include ../_includes/sharedHTMLfunctions

您可以检查我的文件夹结构和包含的内容，它对我有用！

在 layouts/_boostrap.pug 我有：

include ../includes/_mixins.pug
doctype html
   html(lang="es")
       head
           ...
       body
           ...

在 include/_mixins.pug 我有：

//- bootstrap.jade
//- bootstrap mixins

//- Including Icon mixins
include ../components/icons
//- Including Alert mixins
include ../components/alerts
//- Including Tooltip mixins
include ../components/tooltips
//- Including Accordion mixins
include ../components/accordion

Answer 4

同样的事情发生在我身上，只是再次替换它，并停止运行nodemon或任何自动运行的服务器。 完成它们后，您可以运行nodemon或任何一个。