基于点分隔字符串

时间:2016-09-23 20:44:10

标签: knockout.js

我尝试使用knockout.js模板创建HTML表格,其中要绑定的属性的名称是非常动态的,并且作为JSON从服务器返回。

JSON的格式如下:

{"Columns": [
     {"Title": "First Name", "Bind": "Person.FirstName"},
     {"Title": "Last Name", "Bind": "Person.LastName"},
     {"Title": "Birth Date", "Bind": "Person.DOB"}
  ],
  "Rows": [
     {
        "Person": {
           "FirstName": "James",
           "LastName": "Jameson",
           "DOB": "5/7/1965"
        },
        "Person": {
           "FirstName": "Bob",
           "LastName": "Bobson",
           "DOB": "12/15/1976"
        }
      }
    ]
}

鉴于此JSON,我想创建一个生成以下HTML的模板:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Birth Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Jameson</td>
      <td>5/7/1965</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Bobson</td>
      <td>12/15/1976</td>
    </tr>
  </tbody>
<table>

我知道如何使用调用javascript函数的自定义html绑定或通过在服务器上创建HTML并对其应用绑定来实现此目的,但我更倾向于使用模板。

据我所知,这是淘汰赛的一个奇怪用途,但JSON来自服务器,其格式可以在运行时更改。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

Knockout与其他MVVM实现一样,允许您使用带有特定标记的模板,这些模板可以让淘汰赛知道在哪里插入数据。

我们使用类似的Kendo MVVM。我们使用ajax调用将模板加载到视图中以检索模板html并将模板绑定到视图模型。我们根本不使用脚本标签。

这篇文章介绍了如何使用Knockout

执行此操作

http://knockoutjs.com/documentation/template-binding.html