Question

我有一个使用Jade模板引擎的Node.JS / Express应用程序。我有一个Javascript文件，位于包含我的Jade视图的 views 目录正上方的目录中。鉴于下面的代码，我认为视图应能够找到名为 package com.demo; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.view.LayoutInflater; import android.view.View; import android.widget.AbsListView; import android.widget.ArrayAdapter; import android.widget.ListView; import java.util.ArrayList; public class Demo extends Activity { private ListView listView; private String[] arrayS; private View footer; private boolean moreData = true; ArrayList<String> list; private ArrayAdapter ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_demo); listView = (ListView) findViewById(R.id.load); list = new ArrayList<String>(); for (int i = 0; i < 25; i++) { list.add("item" + i); } //Add footer view:- footer = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.progress, null, false); listView.addFooterView(footer); ad = new ArrayAdapter(Demo.this, android.R.layout.simple_list_item_1, list); listView.setAdapter(ad); // Implementing scroll refresh:- listView.setOnScrollListener(new AbsListView.OnScrollListener() { @Override public void onScrollStateChanged(AbsListView absListView, int i) { } @Override public void onScroll(AbsListView absListView, int firstItem, int visibleItemCount, final int totalItems) { final int lastItem = firstItem + visibleItemCount; if (lastItem == totalItems) { if (moreData) { footer.setVisibility(View.VISIBLE); footer.setPadding(0, 0, 0, 0); Handler handler = new Handler(); // hear is the handler for testing purpose handler.postDelayed(new Runnable() { // make some delay for check load more view @Override public void run() { getListData(); } }, 10000); } } } }); } private void getListData() { for (int i = 0; i < 105; i++) { list.add("New Item " + i); } footer.setVisibility(View.GONE); footer.setPadding(0, -1 * footer.getHeight(), 0, 0); //here above tow line invisible footer after data added if (ad != null) { ad.notifyDataSetChanged(); } moreData=false; //now after successfully data get you can stop more data. } }的引用的服务器端 Javascript文件，但是当请求视图时，我得到404错误，说无法找到外部Javascript文件。这让我感到困惑，因为我认为Jade模板执行服务器端，那么为什么这会从Jade common_routines调用中触发404 error？

以下是Jade视图：

render()

这是来自路径文件的调用片段，用于呈现视图，其中block content script(src="../common_routines.js") div(style="padding:5px") h4 #{product.name} if (product.brand != null) p Brand: #{product.brand} div(class="img_and_desc") img(src=product.imageUrl, class="product_image", align="left") if (product.minimumPrice == product.maximumPrice) p Price: #[strong #{product.minimumPrice}] else p Price: #[strong #{product.minimumPrice}] to #[strong #{product.maximumPrice}] if (product.cashBack > 0) p Cash Back amount: #[strong #{product.cashBack}] if (product.freeShipping) p(class="text-emphasized-1") *Free Shipping! if (product.onSale) p(class="text-emphasized-2") Discounted Item分支被触发：

if (err)

以下是我在WebStorm调试器控制台窗口窗格中看到的错误。请注意，它显示文件引用为 /common_routines.js 没有前面的“..”相对目录引用，尽管前面的“..”相对目录引用是在Jade文件参考res.render( 'ajax-product-details', locals, function (err, html) { if (err) // A rendering error occurred. throw new Error("Rendering error(type:" + err.type + ", message: " + err.message); else { // Success. Send back the rendered HTML. res.send(html); return; } });
中清晰可见
("script(src="../common_routines.js")):

这是common_routines.js内容：

[Express][127.0.0.1][GET][DESKTOP] 2016-07-20T10:07:34.940Z /common_routines.js?_=1469009245957 (development error handler) Status code(404) message: Not Found

正如我所说， common_routines.js 位于Jade视图正上方的目录中，因此出于某种原因，此外部文件引用是否无效？：

function truncateString(str, maxLen) { if (str.length > maxLen) return str.substring(0, maxLen - 1) + '&hellip'; return str; } module.exports = { truncateString: truncateString }

Answer 1

您只能在前端引用public文件夹中的静态文件（如果您已将该静态资产设置为从该文件夹中提供）。您可以将common_routines.js文件放在公共文件夹中，例如public/js/。现在，您可以使用script(src="/js/common_routines.js")

在视图文件中引用它

如果您想使用jade文件中的函数而不是前端js文件中的函数，则需要在服务器端js文件中使用var commonRoutines = require('../common_routines.js');将其包含在一个包中。现在，您可以将此对象变量与上下文对象一起传递到视图文件。如您所述，您在渲染时将locals对象传递给视图文件，您可以这样做：

var common_routines = require('../common_routines.js');
var locals = { common_routines: common_routines };
res.render( 'ajax-product-details', locals);

现在，您可以在common_routines.js文件中使用ajax-product-details中的功能。

Node.JS / Express应用程序中的Jade模板无法找到外部Javascript文件？

1 个答案: