将 JSON 对象绑定到 HTML 元素答案

【问题标题】：Bind JSON object to HTML element将 JSON 对象绑定到 HTML 元素
【发布时间】：2012-03-23 04:26:33
【问题描述】：

我想将 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

【问题讨论】：

您希望如何更改 html 元素？为什么改变你的html元素的东西也可以同时更新json？？

标签： javascript html data-binding

【解决方案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。

其他有用的链接：

【讨论】：

【解决方案2】：

首先，将 id 属性添加到您的标记中（您可以使用 DOM 执行此操作，但为了清楚起见，ids 可能最适合此示例）：

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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" />

【讨论】：

【解决方案5】：

我建议看看Knockout。使用它设置您想要的数据绑定非常简单。

【讨论】：

【解决方案6】：

您可以使用其中一种 MVC/MVVM libereries，例如 Backbone.js 或 Knockoutjs。

【讨论】：