Question

我将翡翠混合代码放在单独的文件中，并要求该文件在实际的翡翠文件中。但是，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的玉器布局文件。当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
                  | &nbsp;#{facility}
                | &nbsp;
        .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
           ...

在includes / _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或任何一个。

Jade mixins无法从外部文件工作

4 个答案: