Question

在div中有一个数据绑定onClick，如下所示：

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

是否可以在调用点击之前运行一些javascript，如果它满足某个条件不调用点击？

有点像？：

<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

为什么不直接检查被调用的方法？

<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
    }
}

除了条件和回报之外，无需复杂化。

编辑：如果你已经在使用jQuery，那么使用jQuery很容易从HTML中获取值。以下是您使用隐藏字段的示例（您可以使用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 2

我假设您的问题是您调用了$root中定义的函数，但是您想要访问$data的属性（绑定时的视图模型）。 Knockout使用apply()方法调用绑定函数，并将当前视图模型作为第一个参数传递。因此，您的$data在您的函数中可用this（通过click事件调用时）。

Answer 3

我听说过淘汰赛，而且我有兴趣了解它，但在这一例中，它对你没有任何帮助。另一方面，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();
       }
   });

});

似乎工作得很好。您可以使用其他HTML5 addTable()属性访问您需要传递给data的任何值，没有任何问题。 Check out the fiddle, and fork it to make it work for you

在点击淘汰赛之前运行一些代码

3 个答案: