Liên kết đối tượng JSON với phần tử HTML

Question

Tôi muốn liên kết đối tượng JSON với phần tử HTML.

ví dụ:

Tôi có một đối tượng "người" với các thuộc tính "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> 

như vậy, nếu một giá trị của các phần tử HTML được thay đổi, sau đó sẽ còn là người đối tượng được cập nhật.

là điều này có thể theo bất kỳ cách nào?

tôi sử dụng:

• jquery
• ASP.NET MVC 3

Answer 1

Nếu bạn sẽ làm điều này rất nhiều trong ứng dụng của mình, bạn có thể muốn mang đến một thư viện như số xuất sắc Knockout.js sử dụng MVVM để thực hiện các ràng buộc như bạn mô tả.

đánh dấu của bạn sẽ giống như thế này:

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

Và trong JavaScript:

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

ko.applyBindings(new MyViewModel()); 

Bạn cũng có thể sử dụng một tập dữ liệu nếu có nhiều "nhân dân." Hãy thử hướng dẫn này nếu bạn muốn tìm hiểu cách thực hiện: Working with Lists and Collections.

liên kết hữu ích khác:

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

Answer 2

Tôi khuyên bạn nên nhìn vào Knockout. Thiết lập ràng buộc dữ liệu như bạn đang tìm kiếm rất đơn giản với nó.

Answer 3

Bạn có thể phân tích JSON để biến nó thành một đối tượng JavaScript:

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

Nếu tôi hiểu questi của bạn trên một cách chính xác, bạn nên có JSON mà trông như thế này:

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

Vì vậy, bạn có thể chỉ cần lặp qua các những người như vậy:

$(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

Bạn có thể sử dụng một trong những Các giải pháp MVC/MVVM như vậy là Backbone.js hoặc Knockoutjs.

Answer 5

Đầu tiên, thêm id thuộc tính để đánh dấu của bạn (bạn có thể làm điều này với DOM nhưng cho rõ ràng của rượu sake id s có lẽ thích hợp nhất cho ví dụ này):

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

Sử dụng một xử lý sự kiện jQuery để cập nhật lĩnh vực bất cứ khi nào họ được sửa đổi (đây là một giải pháp hiệu quả nhưng được công việc done- lo lắng về việc tối ưu hóa một khi bạn có một cái gì đó chức năng):

// 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... 
}); 

Bây giờ mỗi khi các lĩnh vực được cập nhật đối tượng của bạn sẽ được quá.