Question

这似乎是可能的，因为http://www.knockoutjs.com的人似乎正在这样做。我无法充分理解他们的代码库以获得类似的模式。

实际上，我有一个基于jQuery选项卡的UI的MVVM样式应用程序。每个选项卡都由一个视图模型表示，我希望能够根据模型中的更改验证和触发事件。

我在页面加载时创建了类似于以下内容的数据表示：


$(document).ready(function(){
  thisTab = new ThisTab();
});

function ThisTab(){
  Load: {Load from my model}
  Save: {Save/Persist model to the db (via web service call)}
  Validate: {
    this.Item1 = function(){Validate item 1, do work, refresh fields, whatever.}
  }
}

模型本身是一个复杂的全局对象，并且对DOM（输入等）的更改会立即更新对象。某些属性的更改应调用其关联的验证项thisTab.Validate.Item1。我没有提出改变事件的问题。如果我将该事件监听器绑定到随机DOM元素，我可以毫无问题地调用我的例程，一切都很好。但是，将事件附加到不相关的DOM对象似乎很奇怪。

所以问题是：我怎样才能做thisTab.addEventListner("someEvent")或$(thisTab).bind("someEvent")之类的事情，其中thisTab不是DOM元素，而是本机对象。试图这样做，我总是得到“不支持此方法”的错误。

Answer 1

将事件附加到标准对象不会使用相同的方法;基本上，你会像这样实现你自己的事件：

function ThisTab()
{
    listeners: [],
    addListener: function(callback) { this.listeners.push(callback); },
    load: { // Finds DOM elements and such, and attaches to their events. The callback from the DOM event should be a method on your object },
    yourDomEventCallback: function() 
    { 
        for(var j = 0; j < this.listeners.length; j++)
            this.listeners[j]();
    }
}

以上代码应该用作起点，因为我只是将它拼凑在一起并且可能存在语法错误。基本上，您已将对象映射到要捕获的事件，然后公开方法以附加在发生隐藏DOM事件时将调用的回调方法。您无法使用jQuery的DOM事件抽象，因为此类事件对您的自定义对象没有任何意义。

Answer 2

将事件绑定到常规JS对象，就像对DOM对象一样。

$(thisTab).bind("someEvent", function() {
    // handler's code here
});

见example。使用这个有一个副作用，即jQuery会将管家标识符添加为对象的属性 - 它看起来像 jQuery1510587397349299863。

这个名为jQuery<timestamp>的属性被添加到具有与之关联的事件或数据的所有DOM对象中，并且常规对象的行为类似。如果您对正在修改的模型对象感到不舒服，那么请使用您自己的回调机制，该机制应该相当容易添加。

如何将事件侦听器附加到JS中的对象

2 个答案: