Связать объект JSON с элементом HTML

Question

Я хочу связать объект JSON с элементом HTML.

например.

У меня есть объект «человек» с атрибутами «FirstName», «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-элементов получает изменен, то будет также объект человек обновляется.

Это возможно в любом случае?

я использую:

• JQuery
• ASP.NET MVC 3

Answer 1

Если вы будете делать это много в своем приложении, вы можете принести библиотеку, такую ​​как отличный Knockout.js, который использует MVVM для привязки при описании.

Ваша разметка будет выглядеть примерно так:

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

А в вашем JavaScript:

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, чтобы превратить его в объект JavaScript:

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

Если я понял ваши квесты на правильно, вы должны иметь JSON, которые выглядят так:

[ 
    { 
     "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); 
    }); 
});​ 

Fiddle: http://jsfiddle.net/RgdhX/2/

Answer 4

Вы можете использовать один из Освобождения MVC/MVVM, такие как Backbone.js или Knockoutjs.

Answer 5

Во-первых, добавьте id атрибуты разметке (вы можете сделать это с помощью DOM, но для ясности ради 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... 
}); 

Теперь каждый раз, когда поля обновляются ваш объект будет слишком.