एचटीएमएल तत्व

Question

पर जेएसओएन ऑब्जेक्ट को बाध्य करें मैं एक JSON ऑब्जेक्ट को HTML तत्व से बांधना चाहता हूं।

उदा।

मैं "lastName"

<div class="person-list"> 
    <div class="person-list-item"> 
    <div>John</div> ---> bind it to person.firstName 
    <div>Smith</div> ---> bind it to person.lastName 
    </div> 
</div> 

इसलिए, यदि HTML तत्वों के मूल्य बदल जाता है, तो भी वस्तु व्यक्ति अद्यतन हो जाता होगा विशेषताओं "firstName" के साथ एक वस्तु "व्यक्ति" है,।

क्या यह किसी भी तरह से संभव है?

मैं का उपयोग करें:

• jQuery
• ASP.NET MVC 3

Answer 1

यदि आप इसे अपने आवेदन में बहुत कुछ कर रहे हैं, तो आप उत्कृष्ट Knockout.js जैसे लाइब्रेरी ला सकते हैं जो वर्णन के अनुसार एमवीवीएम का उपयोग करता है।

आपका मार्कअप कुछ इस तरह दिखेगा:

<div data-bind="text: firstName"></div> 
<div data-bind="text: lastName"></div> 

और अपने जावास्क्रिप्ट में:

function MyViewModel() { 
    this.firstName = "John"; 
    this.lastName = "Smith"; 
} 

ko.applyBindings(new MyViewModel()); 

तुम भी किसी डेटा सेट का उपयोग कर सकते है, तो वहाँ कई हैं "लोगों को।" यदि आप यह जानना चाहते हैं कि यह कैसे करें: Working with Lists and Collections।

अन्य उपयोगी लिंक्स:

• Introduction tutorial
• Excellent demo video (about 30 minutes)

Answer 2

मैं Knockout पर देखने की अनुशंसा। जैसे ही आप ढूंढ रहे हैं, डेटा बाइंडिंग सेट करना बहुत सरल है।

Answer 3

आप इसे एक जावास्क्रिप्ट वस्तु में बदलने के लिए JSON पार्स कर सकते हैं:

var data = $.parseJSON(json_string); 
// or without jQuery: 
var data = JSON.parse(json_string); 

तो मैं समझ गया आपकी तलाश

[ 
    { 
     "firstName": "John", 
     "lastName": "Smith" 
    }, 
    { 
     "firstName": "Another", 
     "lastName": "Person" 
    } // etc 
] 

तो आप बस इतना जैसे लोगों के माध्यम से लूप कर सकते हैं::

$(document).ready(function() { 
    var str = '[{"firstName":"John","lastName":"Smith"},{"firstName":"Another","lastName": "Person"}]', 
     data = $.parseJSON(str); 
    $.each(data, function() { 
     var html = '<div class="person-list-item"><div>' + this.firstName + '</div><div>' + this.lastName + '</div></div>'; 
     $('#person-list').append(html); 
    }); 
});​ 

फिडल: http://jsfiddle.net/RgdhX/2/

Answer 4

आप में से एक का उपयोग कर सकते सही ढंग से पर, आप JSON कि इस तरह दिखना होना चाहिए एमवीसी/एमवीवीएम libereries Backbone.js या Knockoutjs है।

Answer 5

पहले, अपने मार्कअप को id विशेषताओं को जोड़ने (आप डोम के साथ लेकिन स्पष्टता की खातिर id रों के लिए ऐसा कर सकता है शायद सबसे अच्छा इस उदाहरण के लिए उपयुक्त हैं):

<div class="person-list-item"> 
    <div id="firstname">John</div> 
    <div id="lastname">Smith</div> 
</div> 

उपयोग एक jQuery ईवेंट हैंडलर अद्यतन करने के लिए खेतों जब भी वे संशोधित कर रहे हैं (यह एक अक्षम समाधान है, लेकिन काम done- के अनुकूलन एक बार आप कार्यात्मक कुछ है के बारे में चिंता हो जाता है):

// declare your object 
function person(firstn, lastn) { 
    this.firstname = firstn; 
    this.lastname = lastn; 
} 

var myGuy = new person("John", "Smith"); 

$(document).ready(function() { 
    $("#firstname").change(function() { 
     myGuy.firstname = $("#firstname").val(); 
    }); 

    $("#lastname").change(function() { 
     myGuy.lastname = $("#lastname").val(); 
    }); 

    // etc... 
}); 

अब हर बार खेतों अपनी वस्तु अपडेट किया जाता हो जाएगा भी।