将JSON对象绑定到HTML元素

例如

我有一个对象“人”与属性“名字”，“姓氏”

<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

来源

2012-03-05 Wasser Trinker

使用MVC框架？ – 2012-03-05 17:26:46

以及您希望如何更改html元素？以及为什么改变你的HTML元素的东西可以同时更新JSON？ – linuxeasy 2012-03-05 17:30:27

如果您将在应用程序中执行此操作，您可能需要引入一个库，例如优秀的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。

其他有用的链接：

来源

2012-03-05 17:30:52

我建议考虑看看Knockout。设置数据绑定就像你正在寻找的是非常简单的。

来源

2012-03-05 17:30:42 mpdaugherty

您可以解析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/

来源

2012-03-05 17:33:42

可以使用的一个MVC/MVVM libereries是Backbone.js或Knockoutjs。

来源

2012-03-05 17:34:28

首先，添加id属性您的标记（你可以做到这一点与DOM但是为了清楚起见id s为也许最适合于这个例子）：

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

现在每次更新各个字段的对象时会太。

来源

2012-03-05 17:40:01 ZenLikeThat

将JSON对象绑定到HTML元素

回答

相关问题