将JSON对象绑定到HTML元素上

Question

我想将一个JSON对象绑定到一个HTML元素上。

例如:

我有一个名为"person"的对象，它拥有属性"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元素的值被更改，那么对象person也会被更新。

这种情况有可能吗？

我使用：

• jquery
• ASP.NET MVC 3

- Wasser Trinker

---

你期望如何改变HTML元素？为什么改变HTML元素的事情可以同时更新JSON呢？ - linuxeasy

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。

其他有用的链接：

• 入门教程
• 出色的演示视频（约30分钟）

- Drew Gaynor

Answer 2

首先，在您的标记中添加id属性（您可以使用DOM完成此操作，但为了清晰起见，对于此示例，最好适用于id）：

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

使用jQuery事件处理程序，在字段被修改时更新字段（这是一种低效的解决方案，但可以完成任务——在您拥有功能性东西之后再考虑优化）：

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

每次更新字段时，您的对象也会被更新。

- ZenLikeThat

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

代码片段：http://jsfiddle.net/RgdhX/2/

- Alex Coplan

Answer 4

使用jQuery的简单单向方法...

    var resp = your_json_data;
    $(function () {
        $(".jsondata").each(function () {
            $(this).html(eval($(this).attr("data")));
        });
    });

然后在页面中...

 <span class="jsondata" data="resp.result.formatted_phone_number" />

- Sean

Answer 5

我建议看一下Knockout。使用它设置数据绑定非常简单，正如你所寻找的那样。

- mpdaugherty

Answer 6

你可以使用其中一个MVC/MVVM库，例如Backbone.js或Knockoutjs。

- Maxim Manco