我想将JSON对象绑定到HTML元素。
EG
我有一个对象“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元素的值发生更改,那么对象人员也会更新。
这有可能吗?
我用:
如果你在你的应用程序中做了很多这样的事情,你可能想要引入一个库,例如优秀的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。
其他有用的链接:
首先,将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...
});
现在,每次更新字段时,您的对象也将如此。
您可以解析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);
});
});
使用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" />
我建议看看Knockout。像你正在寻找的那样设置数据绑定非常简单。
您可以使用其中一个MVC / MVVM libereries,例如Backbone.js或Knockoutjs。