1
ノックアウトコンポーネントのビューモデルにrequire.jsを使用してテンプレートをロードしようとしていますが、失敗しています。外部ViewModelとKnockoutコンポーネントのテンプレートをロードする
のindex.html（ビュー）
<!doctype html>
<head>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<script data-main="assets/js/app" src="assets/js/vendor/require.js"></script>
</head>
<body>
<table_n></table_n>
</body>
menu.html（テンプレート）
menu.js（ビューモデル）
define(['knockout', 'knockoutMapping'], function (ko, komap) {
debugger;
var self = this;
debugger;
self.filter = ko.observable('');
self.ListaUsuarios = ko.observableArray();
$.ajax({
type: "GET",
url: "http://192.168.15.3/api/menus",
contentType: "application/javascript",
dataType: "json",
success: function (result) {
var a = JSON.stringify(result);
var observableData = komap.fromJS(result);
var array = observableData();
self.ListaUsuarios(array);
}
});
});
App.js（ノックアウトパラメータを初期化する）
(function (undefined) {
'use strict';
requirejs.config({
baseUrl: './', // Raiz
urlArgs: function (id, url) {
return (url.indexOf('?') === -1 ? '?' : '&') + 'v=23';
}, // Debug Cache
deps: ['assets/js/base'],
map: {
'*': {
'jQuery': 'jquery'
}
},
paths: {
// Módulos
'jquery': 'assets/js/vendor/jquery-3.1.1',
// Library jQuery
'knockout': 'assets/js/vendor/knockout-3.4.2',
'knockoutMapping': 'assets/js/vendor/knockout.mapping-latest',
// Config
'start': 'assets/js/start'
},
shim: {
'knockoutMapping': {
deps: ['knockout']
}
},
waitSeconds: 15
});
// Chamando módulo principal para iniciar a aplicação
require(['jquery'], function ($) {
require(['start']);
});
requirejs.onError = function (err) {
console.log(err.requireType);
console.log('modules: ' + err.requireModules);
throw err;
};
}());
base.js
(function() {
define(['jquery'], function() {
(function ($) {
console.info('Verificando Global jQuery...');
if (typeof window === 'object' && typeof window.document === 'object') {
if (!!window && !(!!window.$)) {
window.jQuery = window.$ = jQuery;
}
console.log([$, jQuery]);
}
var version = $().jquery;
if (typeof define === "function" && define.amd && define.amd.jQuery) {
console.info('jQuery: ' + version + ' $.fn.jquery: ' + $.fn.jquery);
return window.jQuery;
}
}(jQuery));
});
}());
start.js（そして最後に初期化します成分）
define(['knockout', 'knockoutMapping'], function (ko, komap) {
debugger;
ko.components.register('table_n', {
viewModel: { require: 'assets/js/component/viewmodel/menu' },
template: { require: 'text!assets/js/component/templates/menu.html' }
});
ko.applyBindings();
});
のindex.htmlファイルを、menu.htmlを：と私は必要と使用についてのいくつかの例を見た後、ブラウザ
Verificando Global jQuery...
require.js:5 Array(2)
require.js:5 jQuery: 3.1.1 $.fn.jquery: 3.1.1
text.js Failed to load resource: the server responded with a status of 404 (Not Found)
app.js:36 scripterror
app.js:37 modules: text
app.js:38 Uncaught Error: Script error for "text", needed by: text!assets/js/component/templates/menu.html_unnormalized2
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
makeError @ require.js:5
onScriptError @ require.js:5
app.js:36 require
app.js:37 modules: null
app.js:38 Uncaught TypeError: Cannot read property 'createViewModel' of undefined
at c (knockout-3.4.2.js?v=23:80)
at Object.loadViewModel (knockout-3.4.2.js?v=23:82)
at Object.e [as Nb] (knockout-3.4.2.js?v=23:78)
at knockout-3.4.2.js?v=23:79
at Object.execCb (require.js:5)
at b.check (require.js:5)
at b.<anonymous> (require.js:5)
at require.js:5
at require.js:5
at each (require.js:5)
c @ knockout-3.4.2.js?v=23:80
loadViewModel @ knockout-3.4.2.js?v=23:82
e @ knockout-3.4.2.js?v=23:78
(anonymous) @ knockout-3.4.2.js?v=23:79
execCb @ require.js:5
check @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
emit @ require.js:5
check @ require.js:5
enable @ require.js:5
init @ require.js:5
h @ require.js:5
completeLoad @ require.js:5
onScriptLoad @ require.js:5
app.js:36 timeout
app.js:37 modules: text!assets/js/component/templates/menu.html_unnormalized2
app.js:38 Uncaught Error: Load timeout for modules: text!assets/js/component/templates/menu.html_unnormalized2
http://requirejs.org/docs/errors.html#timeout
at makeError (require.js:5)
at l (require.js:5)
at require.js:5
makeError @ require.js:5
l @ require.js:5
(anonymous) @ require.js:5
(unknown) XHR Loaded (menus - 200 OK - 971.9319999858271ms - 525B)
ファイルの構造を表示できますか？ – Ray
@レイ、助けてくれてありがとう、ありがとう、私のエラーを見ることができ、私は誰かが同じ問題を抱えている場合にこれを答えとして掲示した。 –