Question

我正在学习淘汰赛并遇到一个问题。有两个添加按钮，一个用于＆＃39;添加新制作＆＃39;另一个＆＃39;添加新模型＆＃39;。当我点击“添加”时，我想打开一个模态弹出框，然后根据我点击的按钮输入汽车制造或汽车模型。我想分享相同的模态弹出窗口，但也希望在模态中显示不同的标题和文本。当我点击“添加新模型”时，我也希望传递汽车的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));

}）

Answer 1

你应该在淘汰赛中查看custom bindings。这是一个最简单的模态弹出自定义绑定，您可以在您的情况下使用：

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');
   }
};

我的理解是你需要一个单一的模态标记代码，它应该可以重用于所有模态。这可以通过许多不同的方式实现，其中一个是with binding在淘汰赛中。这是展示使用的代码：

Check this fiddle

<强> 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>

希望是有帮助的！

在一个bootstrap模式弹出窗口中敲除多个绑定

1 个答案: