Как привязать тумблер с помощью нокаута - PullRequest
Новая
       5

Как привязать тумблер с помощью нокаута

0 голосов
/ 08 ноября 2018

Я написал код ниже, чтобы увидеть, как работает кнопка переключения. Но похоже, что привязка данных не работает.

Ниже приведен HTML-код 

  <div>
        <label class="switch">
            <input type="checkbox" id="toggle123" data-bind="click:isToggleTrueOrFalse" />
            <span class="slider round"></span>
        </label>
    </div>

Ниже это стиль 

<style>

         .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }


    </style>

Ниже приведен скрипт 

<script>
    self.isToggleTrueOrFalse = ko.computed(function () {
        if (document.getElementById('toggle123').checked) {
            // return true;
            console.log("true");
        }
        else {
            console.log("false");
        }
    }, self);
</script>

Мое требование - при нажатии на кнопку переключения я должен получить значение true или false в консоли. В настоящее время в консоли поступает только false.

Также я попытался использовать 

<script>
        this.toggleAssociation1=function () {
            var checkBox = document.getElementById("toggle123");
            if (checkBox.checked == true)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    </script>

и 

<input type="checkbox" id="toggle123" data-bind="click:toggleAssociation1" />

но это тоже не сработало.

Будет щелкать событие работа для этого. Или нам придется использовать любое другое событие.

Может ли кто-нибудь помочь мне в этом.

1 Ответ

0 голосов
/ 09 ноября 2018

Вы используете неправильные привязки для того, что вы пытаетесь достичь. Привязка click используется для вызова функций, которые выполняют некоторое действие. Наблюдаемые и вычисляемые наблюдаемые, с другой стороны, предназначены для хранения значений.

Вам нужна привязка checked (https://knockoutjs.com/documentation/checked-binding.html).). И как только вы ее используете, вам не понадобится следующий бит кода - 

var checkBox = document.getElementById("toggle123");
  if (checkBox.checked == true){
     return true;
  }
  else{
     return false;
  }

Вот способ использования checked привязки: 

function viewmodel(){
  var self = this;
  self.isToggleTrueOrFalse = ko.observable();
  
  //to check the value whenever it updates, we can subscribe to the observable like this:
  self.isToggleTrueOrFalse.subscribe(function(latestValue){
    console.log(latestValue);
  });
}

ko.applyBindings(viewmodel());
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: #2196F3;
}

input:focus+.slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  <label class="switch">
    <input type="checkbox" id="toggle123" data-bind="checked:isToggleTrueOrFalse" />
    <span class="slider round"></span>
  </label>
</div>
...