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

})

===============>>#1 票数:2 已采纳

你应该检查淘汰赛中的自定义绑定 这是一个最简单的模态弹出自定义绑定,您可以在您的情况下使用:

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>

希望是有帮助的!

  ask by Santosh translate from so

未解决问题?本站智能推荐:

1回复

如何在bootstrap模式弹出窗口中打开aspx页面

我有这个链接 我有这个代码打开一个bootstrap模式弹出窗口。 在div内部出现id内容的所有东西都出现在modal弹出窗口中,所以我的问题是有没有办法在模态弹出窗口中显示我已经创建的aspx webform而不必将所有html和codebehind复制到这个div?
6回复

引导模式弹出窗口无法关闭

我在使用引导程序模式弹出窗口时遇到问题。 调用弹出窗口没问题,但是尝试将其关闭会产生奇怪的结果。 不仅仅是隐藏弹出窗口并删除背景,而是隐藏了弹出窗口,而是添加了另一个背景,使屏幕几乎变黑。 原始背景不会被删除。 以下是我尝试使用的html代码 这是我从bootstrap 2.
1回复

Bootstrap模式弹出窗口自动关闭

我的Bootstrap模式弹出窗口运行正常。 但是我的问题是,我的弹出窗口打开了一个editProductImage.aspx页面来进行图像编辑。 当我单击服务器端上载事件时,将关闭模式弹出窗口,并在新窗口中打开editProductImage.aspx 。 我希望在单击“ Clo
2回复

Bootstrap-如何使用JSP实现模式弹出窗口

我正在尝试使用Spring MVC使用JSP实现模式弹出窗口。 在我的index.jsp中,我具有以下href链接: 并且, 始终在此.jsp中 ,包含以下代码片段: 当我单击查找公司 href链接时,我的@Controller在findCompany.jsp中将我重定向,
2回复

Twitter引导模式弹出窗口显示约一秒钟,然后消失

我在注册页面上使用的是TB 2.0。 我在注册页面的底部添加了链接,以允许用户引用我们的条款等。 这是我正在使用的标记的摘要: 弹出对话框是暂时显示的(大约一秒钟),在消失之前,它似乎是从下向上滚动(我必须做几次,因为它发生得太快了)。 对话框似乎从底部向上滚动,我看到的最后一
2回复

显示Twitter Bootstrap确认对话框弹出

我有一个具有以下形式的html文件 当用户提交表单时,它将重定向到action attribute url ,但是如果用户单击“取消”,则将打开一个弹出对话框,并显示一条消息? Are u sure u want to discard changes使用“ ok和“ cancel Are
1回复

引导模式可以被阻止吗?

可以通过任何弹出窗口阻止程序(例如Chrome中的集成阻止程序)阻止Canvas Boot模式对话框。 还是不同的广告块弹出窗口阻止程序? 如果您不明白我的意思:
1回复

在引导程序模式覆盖下禁用滚动

我在bootstrap模式下有可滚动的内容。 当我在弹出式叠加层上触摸移动时,我仍然可以在模式下滚动内容。 可以以某种方式禁用它吗? 在iPad mini上测试。
8回复

jQuery UI模式(弹出框)控件大小,默认情况下隐藏

jsFiddle这个问题 我目前正在使用引导程序模态,这是一个用于创建弹出框的jQuery插件。 (如果有人想查看非常简短的文档,请点击此处的链接 -它非常短,因此只需一分钟)。 不幸的是,我遇到了两个问题: 我需要能够定义模式弹出框的大小。 我尝试了以下操作,但显示不
1回复

在bootstrap模式中对knockoutjs ViewModel应用绑定

我正在尝试将淘汰赛出价应用于模态弹出窗口。 我有fowlling ViewModel : 以及下面的HTML模式 : <section id="test-modal" class="modal fade" tabindex="-1" data-width="760">