Javascript KNockoutJS-引导模式未正确加载
在一个项目中,我使用knockoutJS构建了一个CRUD系统,我从一个AJAX调用中获取数据。目前仍在处理添加和删除功能,但目前我的modal存在问题。它似乎并没有显示我的模态形式,即使它似乎在尝试。它似乎没有给我任何错误 我在这个JSFIDLE中复制了这个问题。我看了几遍代码,但我不太确定问题出在哪里。我仔细检查了引导、jquery和knockout是否正确加载 有人知道我错过了什么吗Javascript KNockoutJS-引导模式未正确加载,javascript,jquery,twitter-bootstrap,knockout.js,Javascript,Jquery,Twitter Bootstrap,Knockout.js,在一个项目中,我使用knockoutJS构建了一个CRUD系统,我从一个AJAX调用中获取数据。目前仍在处理添加和删除功能,但目前我的modal存在问题。它似乎并没有显示我的模态形式,即使它似乎在尝试。它似乎没有给我任何错误 我在这个JSFIDLE中复制了这个问题。我看了几遍代码,但我不太确定问题出在哪里。我仔细检查了引导、jquery和knockout是否正确加载 有人知道我错过了什么吗 ko.bindingHandlers.modal = { init: function (elem
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');
}
}
}
/* global ko, $ */
function Incident(data) {
var self = this;
self.ID = data.ID;
self.Description = ko.observable(data.Description);
self.Incident = ko.observable(data.Incident);
self.Composante = ko.observable(data.Composante);
self.available_composante = ko.observableArray(["A","B","C","D","E"]);
self.chosen_composante = ko.observableArray();
}
Incident.BASE_URL = '../../../../_vti_bin/listData.svc/PROD_Incidents';
Incident.CREATE_HEADERS = {
"accept": "application/json;odata=verbose"
};
Incident.UPDATE_HEADERS = {
"accept": "application/json;odata=verbose",
"If-Match": "*"
};
Incident.prototype.save = function() {
var id = this.ID,
url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');
return $.ajax(url, {
type: id ? "MERGE" : "POST",
data: ko.toJS({
Description: this.Description,
Incident: this.Incident
}),
processData: false,
contentType: "application/json;odata=verbose",
headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
});
};
function IncidentList(data) {
var self = this;
self.incidents = ko.observableArray();
self.currentIncident = ko.observable();
self.showDialog = ko.observable(false);
self.ShowMeTheCurrentSelectedIncident = function(data) {
self.currentIncident();
data.chosen_composante.push(data.Composante);
self.showDialog(true);
};
self.clearCurrentIncident = function() {
self.currentIncident(null);
};
// list filter & automatic loading
self.filter = ko.observable("");
self.orderby = ko.observable("");
self.params = ko.computed(function() {
return ko.toJS({
$filter: self.filter,
$orderby: self.orderby
});
}).extend({
rateLimit: 100
});
self.params.subscribe(self.load, self);
// let inital load happen immediately
self.params.notifySubscribers();
}
IncidentList.prototype.load = function(params) {
var self = this;
return $.get(Incident.BASE_URL, params).then(function(data) {
if (data.d.results) {
self.incidents(data.d.results.map(function(item) {
return new Incident(item);
}));
} else {
console.log("no results received from server");
}
}).fail(function() {
console.log("error", arguments);
});
};
// viewmodel setup
var vm = new IncidentList();
vm.filter("ÉtatValue ne 'Fermé'");
vm.orderby("PrioritéValue desc");
// binding when document is ready
$(function() {
ko.applyBindings(vm);
});
// Ajax mockup
$.mockjax({
url: Incident.BASE_URL,
contentType: "application/json;odata=verbose",
responseText: {
d: {
results: [{
ID: "123",
Description: "The server x is unavailable",
Incident: "1234",
Composante: "A, "
}, {
ID: "124",
Description: "The router located downtown is down",
Incident: "12345",
Composante: "B"
}, {
ID: "125",
Description: "Fiber optic cable downtown is flapping",
Incident: "123456",
Composante: "C"
}, {
ID: "126",
Description: "Network unvailable at the beaver site",
Incident: "1234567",
Composante: "D"
}]
}
}
});
如上所述,您应该如下设置currentIncident:
self.ShowMeTheCurrentSelectedIncident = function(data) {
self.currentIncident(data);
data.chosen_composante.push(data.Composante);
self.showDialog(true);
};
请参阅更新:请在问题本身中包含完整但最小的重复。目前,您没有足够的代码来重现问题(即缺少视图内容),也没有太多的代码(当然,重新处理问题并不需要所有代码)。请参阅“”以获取指南.PS。您没有在编辑单击处理程序中设置
currentIncident
。我已稍微更新以清除背景