如何映射對象以形成字段？

Question

我有一個這樣的對象：

var settings = { 
    Name: "Fairy Tail", 
    Feature: 
    { 
     Translate: true, 
     Share: true 
    } 
} 

和一個表單

<form> 
    <input type="text" name="Name" /> 
    <input type="checkbox" name="Feature.Translate" /> 
    <input type="checkbox" name="Feature.Share" /> 
</form> 

我怎樣才能使對象填寫「自動」的形式（無手工設置每個字段的值）？

Answer 1

您可以（爲更復雜的例子jsfiddle）做這種方式，假設你有settings變量設置第一：

var assignValue = function(n, v){ 
    var field = jQuery('form input[name="'+n+'"]'); 
    if (field.attr('type')=='text'){ 
     field.val(v); 
    } else if (field.attr('type')=='checkbox') { 
     field.prop('checked',v); 
    } 
} 

var assignSettings = function(list, prefix){ 
    if (typeof prefix != 'undefined'){ 
     prefix += '.'; 
    }else{ 
     prefix = ''; 
    } 
    for (item in list){ 
     if ((typeof list[item]=='string')||(typeof list[item]=='boolean')){ 
      assignValue(prefix+item,list[item]); 
     }else if(typeof list[item]=='object'){ 
      var n1 = item; 
      assignSettings(list[n1],prefix+n1); 
     } 
    } 
} 

assignSettings(settings); 

而且這種解決方案並不像在版本其他解決方案我已經看到了這樣的限制遠 - 它支持您提供的案例，並且可以輕鬆擴展以支持不同類型的字段和更多級別。

Answer 2

var inputs = $('form input[type="checkbox"]'); 

$.each(settings.Feature, function(key, val) { 
    inputs.filter('[name="Feature.' + key + '"]')[0].checked = val; 
}); 

例子：http://jsfiddle.net/9z928/

---

如果你也想填補了文本字段：

var inputs = $('form input'); 

inputs.first().val(settings.Name); 

$.each(settings.Feature, function(key, val) { 
    inputs.filter('[name="Feature.' + key + '"]')[0].checked = val; 
}); 

例子：http://jsfiddle.net/9z928/1/

Answer 3

可能是值得這給予一試：http://www.keyframesandcode.com/resources/javascript/jQuery/demos/populate-demo.html

Answer 4

你可以使用這個JavaScript庫映射Obeject到表單域的名稱，反之亦然。 Object-Form-Mapping