将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元素的值发生更改,那么对象人员也会更新.

这有可能吗？

我用:

• jQuery的
• ASP.NET MVC 3

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());

如果有很多"人",您也可以使用数据集.如果您想学习如何操作,请试用本教程:使用列表和集合.

其他有用的链接:

• 介绍教程
• 优秀的演示视频(约30分钟)