Остановить инкрементный счетчик и отключить взаимодействие

Я пытаюсь получить счетчик, чтобы он остановился на 0, и когда он делает весь div, это нечеткое/отключенное взаимодействие. В середине есть ссылка. Поэтому, когда я нажимаю 3 раза, я хочу, чтобы она была неаккуратной.Остановить инкрементный счетчик и отключить взаимодействие

Редактировать: также не нужно использовать нокаут. любой подход, если более простой в порядке.

Какой был бы лучший подход?

Fiddle

var ClickCounterViewModel = function() { 
    this.numberOfClicks = ko.observable(3); 

    this.registerClick = function() { 
     this.numberOfClicks(this.numberOfClicks() - 1); 
    }; 

    this.hasClickedTooManyTimes = ko.computed(function() { 
     return this.numberOfClicks() <= 0; 
    }, this); 
    }; 

ko.applyBindings(new ClickCounterViewModel());

источник

2015-09-23 Espinozo

'disable' не относится к' div 'или даже к ссылкам.Вам придется самому справиться с этой функциональностью. –

Просто попробуйте добавить эту строку

if (this.numberOfClicks() > 0)

Перед

this.numberOfClicks(this.numberOfClicks() - 1);

Мы получим что-то вроде этого:

var ClickCounterViewModel = function() { 
    this.numberOfClicks = ko.observable(3); 

    this.registerClick = function() { 
     if (this.numberOfClicks() > 0) 
      this.numberOfClicks(this.numberOfClicks() - 1); 
    }; 

    this.hasClickedTooManyTimes = ko.computed(function() { 
     return this.numberOfClicks() <= 0; 
    }, this); 
}; 

ko.applyBindings(new ClickCounterViewModel());

See Fiddle

источник

2015-09-23 18:00:55 gioNicol

-1

Просто отключить связь, когда ваш счетчик сделано:

Сначала добавить id в вашей ссылке:

<a id="a1" href=#> <p>empty link</p> </a>

Далее отключить этот идентификатор, когда настало время, как это в ваш javascript:

this.hasClickedTooManyTimes = ko.computed(function() { 
    if (this.numberOfClicks() < 0) { 
     $('#a1').attr('disabled', 'disabled'); // <--- disable it 
    } 
    return this.numberOfClicks() <= 0; 
}, this);

источник

2015-09-23 18:02:59

Это плохой совет. Не манипулируйте DOM с ваших моделей взглядов с помощью инфраструктуры MVVM, такой как KnockoutJS. Управляйте своими моделями просмотров и декларативно обновляйте DOM через привязки. – Jeroen

-1

Посмотрите на скрипку для JS-код, stackoverflow не подтверждает мой раздел кода для содержимого JS.

HTML

<body> 
    <div>You have <a href="#" id="mybtn">teste</a> clicks!</div> 
    <div id="demo"></div> 
</body>

var btnObserver = (function() { 
    var me= this; 
    var clickleft = 3; 

    var registerClick = function() { 
     if(clickleft > 0) { 
      clickleft--; 
     } 
    }; 

    var isCLickable = function() { 
     console.log(clickleft); 
     return clickleft !== 0; 
    }; 

    return { 
     registerClick: registerClick, 
     isCLickable: isCLickable 
    }  
})(); 

    document.getElementById("mybtn").addEventListener("click", function(){ 
     var message= "Hello World"; 
     btnObserver.registerClick(); 

     if(!btnObserver.isCLickable()) { 
      message= "X Blocked!"; 
      // return false or do anything you need here 
     } 

     document.getElementById("demo").innerHTML = message; 
    });

Fiddle: http://jsfiddle.net/qkafjmdp/

источник

2015-09-23 19:02:36

Немного поздно, но взглянуть на мое решение, потому что я упростил намного код, и я думаю, что вы можете получить некоторое значение от него (например, использование var self = this, что является лучшей практикой).

Идея моего решения очень проста:

1) Показать или скрыть ссылку или обычный текст относительно ваших hasClickedTooManyTimes вычисленных переменной.

<a href="#" data-bind="ifnot: hasClickedTooManyTimes">empty link</a> 
<p data-bind='if: hasClickedTooManyTimes'>empty link</p>

2) Просто заблокируйте щелчок на div, если hasClickedTooManyTimes - это правда.

self.registerClick = function() { 
    if(!self.hasClickedTooManyTimes()){ 
     self.numberOfClicks(this.numberOfClicks() - 1); 
    } 
};

Проверьте Fiddle!

Дайте мне знать, если это пригодилось вам!

источник

2015-09-24 14:42:35 Alberto

Остановить инкрементный счетчик и отключить взаимодействие

ответ

Смежные вопросы