Выполнить код до щелчка в нокауте

Question

Существует привязка данных OnClick в DIV так:

data-bind='click: $root.addTable' 

Можно ли запустить некоторые JavaScript, прежде чем щелчок вызывается, и если он satisfys определенного условия не вызвать клик?

Что-то вроде? :

<div id="onThisClick" data-bind='click: $root.addTable'></div> 

$("#onThisClick").delegate("#all", "click", function() { 
if(isTrue){ 
} 
else { 
//run data binding as normal 
} 
} 

Я выполняю некоторую проверку и должен передать значение вызываемой функции javascript.

Answer 1

Я слышал о нокауте JS, и мне интересно узнать об этом, но в этом одном случае это не делает вам ничего хорошего. JQuery, с другой стороны:

$(function() { 
    $root = $("#root"); 
    $root.addTable = function() { 
     $root.html("Hooray!"); 
    }; 

    $("#onThisClick").on("click", function() { 
     $root.html(""); 
     if($("#theText").val().match(/sad/)){ 
      alert("Must not be sad to see table!"); 
     } 
     else { 
      $root.addTable(); 
     } 
    }); 

}); 

Кажется, что все работает нормально. Любые значения, необходимые для перехода на addTable(), могут быть доступны с помощью других атрибутов HTML5 data без проблем. Check out the fiddle, and fork it to make it work for you.

Answer 2

Почему бы просто не проверить метод, который называется?

<div class="button" data-bind="click: $root.addTable">Click</div> 

// in javascript 
function RootViewModel() { 
    this.addTable = function() { 
     if(!condition) { 
      return; 
     } 
     // jumps out when a condition is met 

     // do what you're supposed to do here 
    } 
} 

Не нужно усложнять ситуацию более чем с условием и возвратом.

---

Редактировать: Получение значения из HTML с помощью jQuery легко, если вы уже используете его. Вот пример, если вы используете скрытое поле (вы можете получить его с помощью val():

<input type="hidden" id="myvalue" value="true"></input> 

// in javascript code, select the element by it's id 
if ($("#myvalue").val()) return; 

// plain vanilla JS is a bit more verbose 
if (document.getElementById("myvalue").value === "true") return; 

Вы можете играть с this jsfiddle с идеей

Answer 3

Я предполагаю, что ваша проблема в том, что вы. вызвали функцию, определенную в $root, но вы хотите получить доступ к свойству $data (модель просмотра во время привязки). Нокаут вызывает связанную функцию с использованием метода apply() и передает вашу текущую модель представления в качестве первого параметра. Таким образом, ваш $data доступен как this внутри вашей функции (когда это c alled через событие click).