하나의 부트 스트랩 모달 팝업에서 녹아웃 다중 바인딩

Question

나는 녹아웃을 배우고 있으며 한 가지 문제가 있습니다. 'Add New Make'와 'Add new model'의 두 가지 추가 버튼이 있습니다. '추가'를 클릭하면 모달 팝업을 열고 클릭 한 버튼을 기반으로 자동차 제조업체 또는 자동차 모델 중 하나의 텍스트를 입력하고 싶습니다. 같은 모달 팝업을 공유하고 싶지만 다른 제목과 텍스트를 모달에도 표시하려고합니다. '새 모델 추가'를 클릭하면 자동차의 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'); 
    } 
}; 

내가 뭘 이해하는 것은 모든 조동사 재사용해야 하나 모달 마크 업 코드를 원하는 것입니다.

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을

: 그 중 하나가 knockout.Here에서 with binding가 사용 방법을 설명하는 코드입니다 체크 아웃이 점은 여러 가지 방법으로 가능합니다

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

희망이 도움이됩니다.