배선 부트 스트랩 스위치 - 녹아웃 관찰 가능

Question

이 예제는 부트 스트랩 버튼의 변경 이벤트를 연결하는 경우 http://jsfiddle.net/meno/MBLP9/입니다. 이 문제를 다른 녹아웃 관찰 가능과 관련시키는 방법에 따라 문제가 있습니다.

나는 부하에 기본값이 관찰

self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate); 

, 나 스위치에이를 연결하기 위해 노력하고 있습니다. 나는 또한 바이올린의 문법을 이해하지 못합니다.

그들은 어떻게 관측 대상에 :을 정의하고 =을 정의하지 않습니까? 이 Javascript를 시도하면 구문 오류가 발생합니다.

가 궁극적으로 내가 IsAggregate

내 뷰 모델로 on을 대체하기 위해 노력하고 바이올린 코드에서

//Registering switches 
$("[name='toggleCatalog']").bootstrapSwitch(); 
    $("[name='toggleAggregate']").bootstrapSwitch(); 
var ViewModel = function(modeldata) { 
     var self = this; 
     self.on = ko.observable(true), 
     self.SelectedCatalog = ko.observable(modeldata.SelectedCatalog); 
     self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate); 
     self.IsEnabled = ko.observable(modeldata.SelectedItem.Enabled); 
     self.CatalogConfiguration = ko.observableArray([]); 
     self.ColumnDropdown = ko.observableArray([]); 
     }; 

$(document).ready(function() { 
     var model = new ViewModel(modeldata); 
}; 

Answer 1

을 결합하고, 그 스위치가 갱신 녹아웃을 부트 스트랩 스위치 바인딩 핸들러를 생성 다 : 를 init 함수

init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var $elem = $(element); 
     $elem.bootstrapSwitch(); 
     $elem.bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state 
     $elem.on('switch-change', function (e, data) { 
      valueAccessor()(data.value); 
     }); // Update the model when changed. 
    }, 

그는 제어 한국 석유 공사가를 얻을 수 카우 속성에 바인더 제본 및 '스위치 변화'

을 때 녹아웃 속성을 업데이트 할 핸들러를 넣어하기 위해 jQuery를 사용하고 있습니다 갱신하고 새 값이 그가 녹아웃

update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    var vStatus = $(element).bootstrapSwitch('state'); 
    var vmStatus = ko.utils.unwrapObservable(valueAccessor()); 
    if (vStatus != vmStatus) { 
     $(element).bootstrapSwitch('setState', vmStatus); 
    } 
} 

에게 갱신 현재 값이 아닌 경우 대한 http://knockoutjs.com/documentation/custom-bindings.html

: 방문하시기 바랍니다 바인딩 사용자 정의에 대한 자세한 참조

":"질문, 코드에서 당신은 함수로 모델 그래서 우리는 바이올린에있는 동안 속성 을 정의하기 위해 "="기호를 사용하여 정의 코드, 그는 객체를 사용하므로 ":"을 사용하여 i를 정의합니다. ts 속성

Answer 2

어떤 버전이 작동을 멈추었는지 정확히 알지 못합니다. 나는 그것이 나를 위해 작업을 진행하게 허용 솔루션을 수정했다 공유하고 싶었 :

이

/** 
* Knockout binding handler for bootstrapSwitch indicating the status 
* of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch 
*/ 
ko.bindingHandlers.bootstrapSwitchOn = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var $elem = $(element); 
     $elem.bootstrapSwitch(); 
     $elem.bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial state 
     $elem.on('switchChange.bootstrapSwitch', function (event, state) { 
      valueAccessor()(state); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var vStatus = $(element).bootstrapSwitch('state'); 
     var vmStatus = ko.utils.unwrapObservable(valueAccessor()); 
     if (vStatus != vmStatus) { 
      $(element).bootstrapSwitch('state', vmStatus); 
     } 
    } 
}; 

Answer 3

또한 부트 스트랩 스위치 GitHub의 페이지에 언급 된 녹아웃에 대한 핸들러가있다. 다시 한번 개선 @ 피터의 대답을 바탕으로 knockout-bootstrap-switch

Answer 4

, ...

/** 
* Knockout binding handler for bootstrapSwitch indicating the status 
* of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch 
*/ 
ko.bindingHandlers.bootstrapSwitchOn = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $elem = $(element); 
     $(element).bootstrapSwitch({ 
      onSwitchChange: function (event, state) { 
       event.preventDefault(); 
       valueAccessor()(state);// Update the model when changed. 
       return; 
      } 
     }); 
     $(element).bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial state 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var vStatus = $(element).bootstrapSwitch('state'); 
     var vmStatus = ko.utils.unwrapObservable(valueAccessor()); 
     if (vStatus != vmStatus) { 
      $(element).bootstrapSwitch('state', vmStatus); 
     } 
    } 
}; 

가장 먼저하는 일 : 청소기 방법

ko.bindingHandlers.bootstrapSwitch = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     //initialize bootstrapSwitch 
     $(element).bootstrapSwitch(); 

     // setting initial value 
     $(element).bootstrapSwitch('state', valueAccessor()()); 

     //handle the field changing 
    $(element).on('switchChange.bootstrapSwitch', function (event, state) { 
      var observable = valueAccessor(); 
      observable(state);    
     }); 

     // Adding component options 
     var options = allBindingsAccessor().bootstrapSwitchOptions || {}; 
     for (var property in options) { 
      $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property])); 
     } 

     //handle disposal (if KO removes by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).bootstrapSwitch("destroy"); 
     }); 

    }, 
    //update the control when the view model changes 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 

     // Adding component options 
     var options = allBindingsAccessor().bootstrapSwitchOptions || {}; 
     for (var property in options) { 
      $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property])); 
     } 

     $(element).bootstrapSwitch("state", value);   
    } 
}; 

의례에 부트 스트랩 스위치 옵션 및 템플릿 바인딩을 처리 할 것 같다 가장 눈에 띄는 것은 onSwitchChange 함수를 options 개체의 일부로 전달하는 것입니다. 하지만, 그 외에 다른 작은 편집을 theres ...