Tocas 的新功能 「Binder」

其實這個功能是看到這一篇「Backbone 的 View」有感而發的，

在 Backbone.js 裡面這裡的範例是這樣：

events:
{
    "click #add-friend":  "showPrompt",
    "click .delete"    :  "delete_li"
}

我想說：「喔？還不錯。」

然後就打算自己也在 Tocas 加了一個類似的功能，不過寫法不同，

因為看起來 Backbone.js 是透過「空白」來區隔「事件」跟「元素」的，

但是我想說有時候可能會加很多「事件」，有時候可能會有很多「元素」，或者很多「回傳」。

---

 

Tocas 做法

所以我後來研發出來的寫法是這樣：

$.binder = function(Binds)
{
    for(var i in Binds)
    {
        /** Split the event and the target first */
        var Splits  = i.split('|'),
        /** The first array is events */
            Events  = Splits[0],
        /** Split the targets */
            Targets = Splits[1].split('&')
        
        /** Each target */ 
        for(var t in Targets)
            if(Binds[i].isArray)
                /** Bind each callback if it's a callback array */
                for(var f in Binds[i])
                    $(Targets[t]).on(Events, Binds[i][f])
            else
                $(Targets[t]).on(Events, Binds[i])
    }
}

---

用法

$.binder
({  
    'click     | img & a' : meow.addNew,
    'mouseover | img'     : meow.removeNew
})

翻譯成中文可以像這樣

$.binder
({  
    '事件 事件 事件 | 元素 & 元素' : 回傳,
    '事件          | 元素'       : [回傳, 回傳]
})

所以你可以有多個事件，或是多個元素，甚至多個回傳（用陣列包起來）。

---

 

比照圖

看起來至少比下面的一般 $.on 還要好多了 ..