javascript - 将 JSON 对象绑定(bind)到 HTML 元素

Question

我想将 JSON 对象绑定(bind)到 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

Answer 1

如果您将在您的应用程序中经常这样做，您可能需要引入一个库，例如优秀的 Knockout.js如您所述，它使用 MVVM 进行绑定(bind)。

您的标记看起来像这样:

<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 .

其他有用的链接:

• Introduction tutorial
• Excellent demo video (about 30 minutes)