鏈接UI元素與支持JavaScript對象的最佳方式

這是a post I made last week的改寫。我很驚訝，我沒有得到更多的迴應，也許我沒有描述/標題非常好。鏈接UI元素與支持JavaScript對象的最佳方式

最簡單的方式來描述它：

有什麼樣spring:bind對JavaScript/DHTML？

的我想要什麼的高級視圖：

在我的應用程序，我有我已經通過AJAX加載的「用戶」對象的列表。我想動態地繪製代表這些對象的UI元素，並註冊事件處理程序，以便在用戶編輯視圖時更新後備對象。

更低水平的想法

動態在瀏覽器中顯示的js數據是微不足道的。爲每種類型的數據編寫事件處理程序也不是一個大問題，但它有點乏味。我覺得應該有一些庫，它們會像模板系統一樣工作，動態創建HTML表單元素，使用js對象中的數據填充佔位符，但是當用戶進行編輯時，還需要更新後臺對象表單元素。我知道的最接近的例子是後端技術，即Spring (java framework) binding功能，其中模板中的表單元素根據自動鏈接到服務器上的模型對象的系統進行編碼。

那麼，我所描述的在前端世界中是否存在？

來源

2010-02-22 morgancodes

ew ...這似乎是錯誤的。你想什麼時候更新js對象？在sumbit上？在變化？在按鍵上？應該生成標籤還是輸入？標籤中應該包含哪些文字？只是屬性名稱？ – Prestaul

爲什麼這麼錯？同樣的方法在服務器端技術方面效果很好。我想象的方式，所有的格式將由模板確定。對象將在按鍵上更新，但直到用戶點擊「保存」按鈕纔會發生服務器通信。 – morgancodes

我不知道你所描述的類型的庫，但jQuery提供了非常有用的data()函數，它允許你使用一個關鍵字將任意一段數據與一個DOM元素相關聯。添加新的元素和關聯與它的數據可能是這樣的：

var elem = $('<div class="subscriber">...</div>').appendTo(someContainer); 
elem.data('yourKey', backingObject);

使用事件代表團（例如，live()功能），你可以添加一個事件處理程序，其有效期爲你的用戶對象的所有圖形表示，不管它們是否已經存在。

$('.subscriber').live('click', function(e) { 
    var backingObject = $(this).data('yourKey'); 
    // Now call some methods on the backing object 
});

希望這可以幫助你莫名其妙。

來源

2010-02-22 05:00:15

謝謝湯姆，雖然我懶得寫「//現在調用某些方法」的東西！我希望所有這些都能夠爲我自動連接起來！假設「訂閱者」具有名字，姓氏和電子郵件地址。我不想編寫將「email address」gui元素的值複製到後臺對象的代碼。好像這樣的技術應該已經存在了。 – morgancodes

我明白了。表單生成，包括輸入處理例程。也許在你的問題中增加這個方面，我無法推斷這一點。有趣的是，整個事情。 –

感謝您的反饋。我編輯了這個問題。希望現在更清楚一點。 – morgancodes

這不是一個答案，而是一個更大的評論。它可以幫助寫你想要使用的API，如：

var jsObj = {}; 

jsObj.bind(document.getElementById("firstName"), "onchange"); 
//binds the data from the firstName element to the jsObject in property "firstName" during the onchange event.

難道這就是你想幹什麼？

一個快速谷歌搜索變成了： http://api.jquery.com/bind/

會很有趣，使代表對jQuery的綁定，不看到很難做到。

來源

2010-02-22 14:49:49 jon077

我想要的東西就像Spring綁定一樣工作。創建一個模板。爲模板中的元素賦予屬性，將它們鏈接到數據模型，呈現模板，自動附加事件處理程序。所以我的模板可能有一些像

#address.street#

的東西。模板渲染器將替換##文本，並將一個事件處理程序附加到包含的div上，該處理程序將a）使其可以在點擊時進行編輯，並b）將更改傳播到後面的對象。 – morgancodes

Knockout看起來像它做你正在尋找的工作。

來源

2012-08-30 18:22:44 rado

鏈接UI元素與支持JavaScript對象的最佳方式

回答

相關問題