Question

我使用jsViews创建一个小表单。

在模板中，我定义了一些绑定到自定义处理程序的按钮。

在处理程序中，我想使用event对象（特别是，我想阻止提交外部<form>的默认按钮行为。

除了Firefox之外，我测试的所有浏览器都能正常运行。 Firefox的事件对象为undefined。所有其他浏览器都定义了MouseEvent个对象。

如何使用FF修复它？

这是一个小型的复制品：

＆＃13;

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(event); // Should not be undefined
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
  <input data-link="value" />
  <button data-link="{on ~changeValue 1}">+1</button>
  <button data-link="{on ~changeValue (-1)}">-1</button>
</script>

<div id="container">

</div>

＆＃13;

PS：我使用jQuery 1.12.4和jsViews 0.9.90

Answer 1

查看documentation for {on}。

这里解释了传递给{on}事件处理程序的参数： http://www.jsviews.com/#link-events，在事件处理函数的签名部分中，其中显示：

如果{on}绑定是：
{^{on 'click' myHandler param1 param2 data=myData}}
或
data-link="{on 'click' myHandler param1 param2 data=myData}"
然后myHandler函数应该有签名：
function myHandler(param1, param2, ev, eventArgs) { ... }
其中ev是jQuery事件对象，eventArgs是JsViews事件对象

Answer 2

在回调函数中，您可以检查参数并查看您需要的内容。在这种情况下，我们可以在 changeValue 回调中尝试此操作：

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(arguments); // check what actual arguments are
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);

而且，您现在可以将参数[1] 作为事件来执行 preventDefault 。

(function($) {
  var dataVm = {
    value: 42
  };

  var handlers = {
    changeValue: function(valueToAdd) {
      var theEvent = arguments[1];
      $.observable(dataVm).setProperty("value", dataVm.value + valueToAdd);
      console.log(arguments); // check what actual arguments are
      theEvent.preventDefault(); // execute preventDefault from it
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, handlers);
})(jQuery);

Firefox的事件对象为null

2 个答案: