將javascript對象綁定到DOM

我正在試圖創建一個跟蹤窗體狀態的javascript對象。我的第一個刺是一個冗長的「程序性」的jquery解決方案，我遍歷每個表單字段，測試它是否設置爲「全部」，刪除類，或者如果它不存在，則添加它。這是一個簡短的版本：將javascript對象綁定到DOM

function activeClass() { 
    if(this.val() === 'All') { 
    $(this).parent().removeClass('active'); 
    } 
    $('#content-filter select', context).foreach(function() { 
    if(this.val() !== 'All') { 
     this.addClass('active'); 
    } 
    }); 
}

我們也在做很多其他的事情，所以代碼越來越長。我想要做的下一個方向是創建一個單獨的對象，用於跟蹤表單狀態並使用事件偵聽器更新表單狀態。

formState = { 
    featured: false, 
    all: false, 
    category: 'All', 
    topics: 'All', 
    audience: 'All', 
    date: {value: '', min: '', max: '', filter_op: '='}, 
    };

我正在努力的部分是如何將對象綁定到DOM。我的第一個傾向是做這樣的事情：

$('select').on('change', function() { 
    formState[$(this).attr('id')] = $(this).val(); 
    });

這裏的問題是，選擇的id具有的屬性相匹配。另外，我被告知，這樣做的方法是使用getter和/或setter方法來更改這些值。我對這意味着什麼有了一些理解，但是我感到困惑的是那些如何綁定到DOM。

來源

2016-05-27 icicleking

爲什麼使用單獨的對象跟蹤狀態，只需從DOM元素中獲取狀態即可？ – Barmar

如果您想要保留元素的額外狀態，可以使用jQuery的'.data（）'方法將任意數據與DOM元素相關聯。 – Barmar

拯救生命的建議：學習一個有助於數據綁定的框架，否則你的代碼將會增長很多，變得太難維護。 I will leave here some suggestions。

現在，使用jQuery做......你有2個主要的大選項：更新表單模型在每一個變化（類似於你所擁有的），或者只是在收集表單操作中的所有字段數據（例如：按發送按鈕）。

選項1：始終更新模型！

您必須對錶單中的每個屬性都有一個很好的引用（id），以便您可以根據需要創建需要不斷更新表單模型的偵聽器。類似於你做了什麼：

$('#'+fieldId).on('change', function() { 
    var myNewValue = $('#'+fieldId).getValue(); 
    updateMyFormModel(fieldId, newValue); 
});

對於每一個表單字段你應該添加一個前綴，也許以指示屬性是因爲如果你在同一個頁面中使用幾種形式和註冊在同一個對象的所有觀察家它會變得混亂，非常快。

你的形式發送按鈕應該有類似

onclick="retrieveMyFormModel()"

，你只得到你的汽車無更新表單模型，並將其發送到服務器。

選項2：收集到底

所有的數據什麼也不做，直到最後一刻，直到發送按鈕，用戶點擊。去所有的領域，創建你的表單模型併發送它。

來源

2016-05-27 16:53:28

將javascript對象綁定到DOM

回答

相關問題