Доступ к этому в функции Click - PullRequest
Новая
       15

Доступ к этому в функции Click

0 голосов
/ 17 мая 2018

Возможно ли получить доступ к $(this) и выполнить такие действия, как hide() или toggle() this div в Knockout? Я пытаюсь получить доступ к нему через JQuery. Любые альтернативные методы внутри функции приветствуются.

На данный момент, если я сделаю это: 

click: function(){ console.log(this) }

Я получаю $data моей модели.

Я знаю другие способы обработки этого действия с помощью модели нокаута, но мне было интересно, возможно ли это? 

  <div data-bind="click: function(){ $(this).hide() }" class="alert alert-secondary alert-dismissible fade show" role="alert" >
         some text here
    </div>

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Почти всегда лучше обрабатывать логику в модели представления вместо того, чтобы загромождать вашу разметку, однако вы можете получить доступ к элементу с помощью "$ element" вместо "this". Для лучшего примера того, как сделать , следует сделать , обратитесь к превосходному ответу Томалака. 

data-bind="click: function(){ $($element).hide() }"
0 голосов
/ 17 мая 2018

Можно ли получить доступ к $ (this) и выполнить такие действия, как hide () или toggle () этого div в Knockout?

Да, но вы не должны этого делать.

Любой код jQuery (кроме служебных функций $.ajax()) и любой другой код, который взаимодействует с DOM (модификация, обход, обработка событий, изменения стиля), должен полностью находиться вне вашей модели представления и вашей вид.

  • Ваша viewmodel управляет состоянием вашего приложения, а не выглядит .
  • Способ управления внешним видом приложения заключается в привязке свойств viewmodel для просмотра свойств.
  • Представление должно полностью зависеть от модели представления, но модель представления должна иметь нулевые зависимости от представления.
    • Добавление кода, вызывающего jQuery .hide() в viewmodel, вводит зависимость от представления внутри viewmodel. Предположим, вы изменили свое мнение, и .hide() больше не является правильным решением. Теперь вам также нужно изменить модель представления - без добавления каких-либо реальных функций.
    • Добавление кода, вызывающего jQuery .hide() в представлении, оставляет состояние внутри модели представления в темноте об изменении способа отображения вещей. Вы теряете контроль над тем, как выглядит модель представления, и постепенно вынуждены добавлять еще больше подобных хаков.
  • Используйте существующие привязки (есть привязки всех основных взаимодействий, таких как отображение или скрытие элементов, добавление обработчиков событий, взаимодействие с элементами формы) или запись новых привязок для особого поведения.

Итак, в вашем случае вам нужно

  • свойство viewmodel, которое отслеживает, должен ли элемент быть видимым
  • функция для установки этого свойства
  • visible переплет

В случае диалога, давайте назовем это свойство isVisible и по умолчанию оно будет true.

ViewModel: 

function Alert() {
    var self = this;

    self.isVisible = ko.observable(true);
    self.message = ko.observable("some text here");
    self.dismiss = function () { self.isVisible(false); };
}

Вид, завернутый для удобочитаемости: 

<div
  data-bind="
    text: message,
    click: dismiss,
    visible: isVisible,
    text: message
  "
  class="alert alert-secondary alert-dismissible fade show"
  role="alert"
></div>
0 голосов
/ 17 мая 2018

Может быть, вы можете передать event и получить доступ к event.target и сделать event.target.hide() на этом.Обычно такого рода ситуации решаются путем присвоения this какой-либо другой переменной 

function sample(){
    var _this = this;
    function(){
        console.log(_this,this); // both are accessible here
    }
}
...