こんにちは、require js と knockout js を一緒に使用するのに少し苦労しています。私が行っていた既存のプロジェクトにrequire jsを実装しようとしています。ノックアウトで障害物にぶつかるまで、すべてが順調に進んでいました。
ここのノックアウトページで提供されている例に従おうとしていました: http://knockoutjs.com/documentation/amd-loading.html
試しko.applyBindings(new GDI_Application());てみると、未定義として返されます。また、 https://github.com/rniemeyer/knockout-amd-helpersをセットアップして、外部テンプレートをロードしました。ここで別のガイドに従いましたhttp://www.newsuntold.dk/post/using-requirejs-and-knockout-amd-helpers-with-knockoutしかし、それでも違いはありませんUncaught TypeError: undefined is not a function
何が欠けていると思いますか？
更新されたコード: 私の HTML コード:
<script data-main="js/GDI_MAIN" src="js/require.js"></script>
ここに私の GDI_MAIN js コードがあります:
require.config({
paths: {
"jqueryUI": "../assets/jqueryUI/jquery-ui.min",
"bootstrap": "bootstrap.min",
"bootstrap_select": "../assets/silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.min",
"jquery_timepicker": "jquery-ui-timepicker-addon",
"jqueryui_timepicker_ext": "jquery-ui-sliderAccess",
"moment": "moment",
"cookie": "js.cookie",
"knockout-amd-helpers": "knockout-amd-helpers.min",
"text": "text"
},
"shim": {
bootstrap: {
deps : [ 'jquery'],
exports: 'Bootstrap'
},
bootstrap_select: {
deps : [ 'jquery', 'bootstrap'],
exports: 'Bootstrap_Select'
},
jquery_timepicker: {
deps : [ 'jquery'],
exports: 'Jquery_Timepicker'
},
jqueryui_timepicker_ext: {
deps : [ 'jquery'],
exports: 'Jqueryui_Timepicker_Ext'
}
}
});
require(["knockout", "GDI_Application", "GDI_Buttons", "GDI_common", "knockout-amd-helpers", "text", "moment"], function (ko, GDI_Application) {
ko.amdTemplateEngine.defaultPath = "../templates";
ko.applyBindings(new GDI_Application());
GDI_Application.fetchdata();
});
これは GDI_Application コードです。
define(["knockout", "jquery", "jqueryUI", "bootstrap", "bootstrap_select","jquery_timepicker", "jqueryui_timepicker_ext", "moment"], function(ko, $) {
ko.bindingHandlers.modal = {
init: function (element, valueAccessor) {
$(element).modal({
show: false
});
var value = valueAccessor();
if (typeof value === 'function') {
$(element).on('hide.bs.modal', function() {
value(false);
});
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).modal("destroy");
});
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).modal('show');
} else {
$(element).modal('hide');
}
}
}
incidentViewModel = function IncidentViewModel() {
var self = this;
self.showDialog = ko.observable(false);
self.incidents = ko.observableArray();
self.currentIncident = ko.observable();
Incident.BASE_URL = '../../_vti_bin/listData.svc/GDI_DEV_Incidents';
Incident.CREATE_HEADERS = {"accept": "application/json;odata=verbose"};
Incident.UPDATE_HEADERS = {"accept": "application/json;odata=verbose","If-Match": "*"};
self.fetchdata = function() {
console.log("fetching - Attempting to execute code.");
$.getJSON(Incident.BASE_URL+filterlist+orderlist,
function(data) {
if (data.d.results) {
self.incidents(data.d.results.map(function(item) {
return new Incident(item);
}));
$('#loading').hide("slow");
$('#IncidentTable').show("slow");
console.log("fetching data completed");
}else {
console.log("no results received from server");
}
});
}
self.saveorupdate = function() {
console.log("save function executed");
var id = this.ID,
url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
console.log(url);
return $.ajax(url, {
type: id ? "MERGE" : "POST",
data: ko.toJSON({
Description: this.Description,
Incident: this.Incident
}),
processData: false,
contentType: "application/json;odata=verbose",
headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
success: function (data) {
incidentViewModel.fetchdata();
console.log("Record was sucessfully saved.");
}
});
}
self.ShowSelectedIncident = function(data) {
self.currentIncident(data);
self.showDialog(true);
console.log("The show selected incident has been ran.");
}
self.clearCurrentIncident = function() {
self.showDialog(false);
self.currentIncident(null);
}
self.AddNewIncident = function() {
self.showDialog(true);
self.currentIncident({ID:"",Description:"",Incident:""});
console.log("AddNewIncident has been executed sucessfully.");
}
}
function Incident(data) {
var self = this;
self.ID = data.ID;
self.Description = ko.observable(data.Description);
self.Composante = ko.observable(data.Composante);
self.Incident = ko.observable(data.Incident);
self.ÉtatValue = ko.observable(data.ÉtatValue);
self.PrioritéValue = ko.observable(data.PrioritéValue);
self.Duré = ko.observable(data.Duré);
self.Service = ko.observable(data.Service);
self.Début_imputabilité = ko.observable(data.Début_imputabilité);
self.Début_de_interruption = ko.observable(data.Début_de_interruption);
self.Fin_de_interruption = ko.observable(data.Fin_de_interruption);
self.Groupe_Support_Prime = ko.observable(data.Groupe_Support_Prime);
self.ResponsableValue = ko.observable(data.ResponsableValue);
self.Impact = ko.observable(data.Impact);
self.Dépanage = ko.observable(data.Dépanage);
self.Suivi = ko.observable(data.Suivi);
self.Ressources = ko.observable(data.Ressources);
}
return incidentViewModel;
});