【发布时间】：2014-06-04 17:17:01
【问题描述】：
我正在学习淘汰赛，但遇到了一个问题。有两个添加按钮，一个用于“添加新品牌”，另一个用于“添加新模型”。当我单击“添加”时，我想打开一个模式弹出窗口并根据我单击的按钮输入汽车品牌或汽车型号的文本。我想共享相同的模式弹出窗口，但也想在模式中显示不同的标题和文本。当我单击“添加新模型”时，我也想传递汽车的 MakeId。下面是我的视图模型。我相信有更好的方法。如有错误请指正！！
$(function () {
var VehicleBasic = function () {
var self = this;
self.VIN = ko.observable();
self.selectedYear = ko.observable();
self.Years = ko.observableArray([]);
self.selectedMake = ko.observable();
self.Makes = ko.observableArray([]);
self.NewMake = ko.observable();
self.selectedModel = ko.observable();
self.MyModels = ko.observableArray([]);
self.NewModel = ko.observable();
self.Styles = ko.observableArray([]);
self.selectedStyle = ko.observable();
self.ShowModels = ko.computed(function () {
if (self.selectedMake())
return true;
return false
});
self.ClearAddMake = function () {
self.NewMake('');
};
self.AddNewMake = function (NewMake) {
debugger;
$.ajax({
url: "ChromeOptimization.aspx/AddMake",
async: false,
data: JSON.stringify({ 'make': NewMake.NewMake() }),
dataType: "json",
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data.d, function (index, v) {
self.Makes.push(v);
});
}
});
};
self.ClearAddNewModel = function () {
self.NewModel('');
};
self.AddNewModel = function (newModel) {
debugger;
$.ajax({
url: "ChromeOptimization.aspx/AddNewModel",
async: false,
data: JSON.stringify({ 'makeId': self.selectedMake(), 'model': newModel }),
dataType: "json",
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data.d, function (index, v) {
self.Makes.push(v);
});
}
});
};
}
var viewModel = new VehicleBasic();
var vin = '';
$.ajax({
url: "ChromeOptimization.aspx/GetBase",
async: false,
data: { vin: vin },
dataType: "json",
type: 'GET',
contentType: "application/json; charset=utf-8",
success: function (data) {
viewModel.Makes(data.d.Makes);
viewModel.VIN = data.d.VIN;
viewModel.Years = data.d.Years;
viewModel.selectedMake(data.d.selectedMake);
}
});
viewModel.selectedMake.subscribe(function (makeId) {
viewModel.MyModels.removeAll();
viewModel.selectedModel(undefined);
viewModel.selectedStyle(undefined);
if (makeId != undefined || makeId != null) {
$.ajax({
url: "ChromeOptimization.aspx/GetModels",
async: false,
data: { MakeId: makeId },
dataType: "json",
type: 'GET',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data.d, function (index, v) {
viewModel.MyModels.push(v);
});
viewModel.selectedModel(undefined);
}
});
}
});
viewModel.selectedModel.subscribe(function () {
viewModel.Styles.removeAll();
viewModel.selectedStyle(undefined);
if (viewModel.selectedMake() && viewModel.selectedModel()) {
$.ajax({
url: "ChromeOptimization.aspx/GetStyles",
async: false,
data: { makeId: viewModel.selectedMake(), modelId: viewModel.selectedModel() },
dataType: "json",
type: 'GET',
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data.d, function (index, v) {
viewModel.Styles.push(v);
});
viewModel.selectedStyle(undefined);
}
});
}
})
ko.applyBindings(viewModel, $('#divBasicInformation').get(0));
})
【问题讨论】：
-
我不知道如何开始绑定。
-
感谢 PW Kad 的回复。现在我有两个添加按钮和两个模式弹出窗口。一个添加按钮在上述绑定中绑定了“AddNewMake”和另一个“AddNewModel”，但我只想为两个添加按钮使用一个模式弹出窗口，即绑定。
标签： twitter-bootstrap knockout.js popup modal-dialog