天天看點

KnockoutJS 3.X API 第七章 其他技術(5) 使用其他事件處理程式

在大多數情況下,資料綁定屬性提供了一種幹淨和簡潔的方式來綁定到視圖模型。 然而,事件處理是一個常常會導緻詳細資料綁定屬性的領域,因為匿名函數通常是傳遞參數的推薦技術。 例如:

作為替代,Knockout提供了兩個幫助函數,它們允許您辨別與DOM元素關聯的資料:

<code>ko.dataFor(element)</code> - 傳回可用于與元素綁定的資料

<code>ko.contextFor(element)</code> - 傳回DOM元素可用的整個綁定上下文

這些幫助函數可以在事件處理程式中使用,這些事件處理程式使用類似于jQuery的綁定或單擊的方式地附加。 上面的函數可以連接配接到每個連結一個删除類,如:

更好的是,這種技術可以用于支援事件委托。 jQuery live / delegate / on函數是一個簡單的方法來實作這一點:

現在,單個事件處理程式在更進階别附加,并處理與remove類的任何連結的點選。 此方法還具有自動處理動态添加到文檔的附加連結(可能是由于項目添加到observableArray的結果)的額外好處。

此示例顯示父級和子級的多個級别上的“add”和“remove”連結,每個類型的連結具有單個處理程式。

UI源碼:

視圖模型源碼:

無論嵌套連結如何嵌套,處理程式總是能夠識别和操作适當的資料。 使用這種技術,我們可以避免将處理程式附加到每個連結的開銷,并可以保持标記清潔和簡潔。

作者:smallprogram

出處:

http://www.cnblogs.com/smallprogram

感謝您的閱讀。喜歡的、有用的就請大哥大嫂們高擡貴手"推薦一下"吧!你的精神支援是部落客強大的寫作動力。歡迎轉載!另外,文章在表述和代碼方面如有不妥之處,歡迎批評指正。留下你的腳印,歡迎評論!