0
私は剣道のTreeViewを使って簡単なツリーを作成しようとしています。Javaスクリプトがエクスプレスで読み込まない
HTMLコードは以下の通りです：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.default.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js"></script>
</head>
<body>
<script>
//To check if the scripts are loading
var len = $('script').filter(function() {
return ($(this).attr('src') == 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js');
}).length;
//if there are no scripts that match, the load it
if (len === 0) {
$.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js');
console.log("jquery not loading");
}
else
console.log("jquery loading");
//
var len = $('script').filter(function() {
return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js');
}).length;
//if there are no scripts that match, the load it
if (len === 0) {
$.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js');
console.log("treeview kendo not loading");
}
else
console.log("treeview kendo loading");
len = $('script').filter(function() {
return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js');
}).length;
//if there are no scripts that match, the load it
if (len === 0) {
$.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js');
console.log("core kendo not loading");
}
else
console.log("core kendo loading");
len = $('script').filter(function() {
return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js');
}).length;
//if there are no scripts that match, the load it
if (len === 0) {
$.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js');
console.log("data kendo not loading");
}
else
console.log("data kendo loading");
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview").kendoTreeView({
dataSource: inlineDefault
});
</script>
<div id="example">
<div class="demo-section k-content">
<h4>Inline data</h4>
<div id="treeview"></div>
</div>
<style>
.box .k-textbox {
width: 100px;
}
</style>
</div>
</body>
</html>
このHTMLページは以下の通りであるノードJSによって提供されています。だから、この
var nano = require('nano')('http://localhost:5984');
var express = require('express');
var app = express();
var fs = require ('fs');
var bp = require('body-parser');
var urlencodedParser = bp.urlencoded({extended: false});
app.set('port',process.env.PORT || 3001);
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next();
});
app.get('/a',function(req,res){
res.status(200).sendFile(__dirname+"/a.html");
});
app.get('/kendo.common.min.css',function(req,res){
res.setHeader('content-type','text/css');
res.sendFile(__dirname+"/kendo.common.min.css");
});
app.get('/kendo.default.min.css',function(req,res){
res.setHeader('content-type','text/css');
res.sendFile(__dirname+"/kendo.default.min.css");
});
app.get('/kendo.default.mobile.min.css',function(req,res){
res.sendFile(__dirname+"/images/kendoui.woff");
});
app.get('/images/kendoui.woff?v=1.1 ',function(req,res){
res.setHeader('content-type','text/css');
res.sendFile(__dirname+"/kendo.default.mobile.min.css");
});
app.get('/kendo.core.min.js',function(req,res){
res.setHeader('content-type','text/javascript');
res.sendFile(__dirname+'/kendo.core.min.js');
});
app.get('/kendo.treeview.min.js',function(req,res){
res.setHeader('content-type','text/javascript');
res.sendFile(__dirname+'/kendo.treeview.min.js');
});
app.get('/kendo.data.min.js',function(req,res){
res.setHeader('content-type','text/javascript');
res.sendFile(__dirname+'/kendo.data.min.js');
});
app.listen (app.get('port'), function(){
console.log ('Express started on http://localhost:' +
app.get ('port') + '; press Ctrl-C to terminate.');
});
HTMLコードの例は、hereという例です。ここでの唯一の違いは、htmlとkendo jsファイルがnodeJsサーバーからロードされていることです。また、JavaScriptが読み込まれているかどうかを確認するために、StackOverflowで見つけたテストを行いました。 TreeViewを除くすべてがロードされています。 Chromeのデベロッパーツールはエラーを投げておらず、どちらもNodeではありません。誰かがなぜこれが読み込まれていないのか説明してください。
ありがとうございます。
編集：@ LuizFernandodaSilvaさんのコメントに行く前に、私が走ったとき、Chromeのコンソールはこのように見えます。私はこれから、スクリプトが読み込まれていると仮定しました。 
私のコメントでは、javascriptとcssのCDNに切り替えました。コンソールは上記と全く同じですが、ツリーはロードされません。
フロントエンドとnodejs APIでjavascriptを読み込むのはなぜですか？それはフロントエンドのjsかノードコードですか？ フロントエンドコードの場合は、スクリプトのパスをチェックするだけでかまいません（おそらく、./kendo ...ではなく、kendo ...）。さもなければ、それはファイルとしてサーバーになることができますが、私はあなたがただURLでスクリプトにアクセスできるので、必要ではないと思います。 また、開発ツールのコンソールを見ましたか？通常、それはヒントを与える。たとえば、パスの問題がある場合、コンソールはおそらく見つからないエラーをログに記録します。 –
ちょうどもう一つの観察：フロントエンドスクリプトの場合は、jqueryプラグインと同じ方法で、スクリプトファイルの代わりにCDNコードを使用することができます。 –
@LuizFernandodaSilvaフロントエンドスクリプトなので、CDNに切り替えました。これは、スクリプトがコンソールにロードされているが、ツリーが構築されていないことを示しています。編集したスクリーンショットをご覧ください。 – NewbieProgrammer