Twitter bootstrap 在一个引导模式弹出窗口中取消多个绑定

我正在学习击倒，有一个问题。有两个添加按钮，一个用于“添加新品牌”，另一个用于“添加新型号”。当我单击“添加”时，我想打开一个模式弹出窗口，并输入文本“汽车品牌”或“汽车型号”，基于我单击的按钮。我想共享相同的模式弹出窗口，但想在模式中显示不同的标题和文本。当我单击“添加新模型”时，我也想传递汽车的MakeId。下面是我的ViewModel。我相信有更好的方法。如果我错了，请纠正我

$(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));

})

你应该登记参加淘汰赛。以下是一个最简单的模式pop自定义绑定，可在您的案例中使用：

ko.bindingHandlers.modal = {
  init: function (element, valueAccessors) {
       var options = ko.utils.unwrapObservable(valueAccessors() || {});    

       $(element).modal(options);
   },
   update: function (element, valueAccessors) {
       var options = ko.utils.unwrapObservable(valueAccessors() || {});

       $(element).modal(options.show() ? 'show' : 'hide');
   }
};

我的理解是，您需要一个单一的模态标记代码，它应该可用于所有模态。这一点可以通过多种不同的方式实现，其中一种方式是击倒。以下是演示此用法的代码：

JS

function modal(data)
{
  var self = this;

  self.title = data.title || 
    'Default title';
  self.message = data.message || 
    'Default message';
  self.confirmButtonText = data.confirmButtonText || 
    'Default text';
  self.confirmAction = data.confirmAction || 
    function() { alert("Default action"); };
}

function vm()
{
  var self = this;

  self.addMake = function() { alert("Maked added"); };

  self.addCar = function() { alert("Car added"); };

  self.MyModels = ko.observableArray([
    new modal({ 
      title: "Add new make", 
      message: "This modal will add new make.",
      confirmButtonText: "Add make", 
      confirmAction: self.addMake 
    }),
    new modal({ 
      title: "Add new car", 
      message: "This modal will add new car.",
      confirmButtonText: "Add car", 
      confirmAction: self.addCar 
    })
  ]);

  self.modalVisible = ko.observable(false);

  self.SelectedModal = ko.observable(self.MyModels()[0]);

  self.openModal = function(data, event)
  {
    self.SelectedModal(data);
    self.modalVisible(true);
  };

  self.closeModal = function(data, event) { self.modalVisible(false); };
} 

Html

<div class="modal fade" data-bind="modal: { backdrop: 'static', keyboard: false, show: modalVisible }">
    <div class="modal-dialog" data-bind="with: SelectedModal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click: $root.closeModal">&times;</button>
                <span class="modal-title"><span data-bind="text: title"></span></span>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <span data-bind="html: message"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bind="click: $root.closeModal">Cancel</button>
                <button type="button" class="btn btn-danger" data-bind="click: confirmAction, text: confirmButtonText"></button>
            </div>
        </div>
    </div>
</div>

&时代；
取消

---

希望就是帮助

我不知道如何开始装订。谢谢你的回复。现在我有两个添加按钮和两个模式弹出窗口。在上面的绑定中，一个添加按钮绑定了“AddNewMake”和另一个“AddNewModel”，但我只想为两个添加按钮使用一个模式弹出窗口，即绑定。太棒了！！谢谢Gaurav。@Santosh如果它能帮助您，请单击此答案计票部分下方的复选标记，将其作为您问题的答案：）@Gaurav-是否可以将ViewModel中的复选框添加到消息参数中？