knockoutjs 与表的绑定问题答案

【问题标题】：knockoutjs binding troubles with tableknockoutjs 与表的绑定问题
【发布时间】：2011-09-10 10:33:34
【问题描述】：

我在将带有数组的视图模型绑定到表时遇到问题。我有一个表格模板和一个行模板。表是不是创建的行？有什么想法吗？

代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1-vsdoc.js" ></script>
<script src="../../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>    
<script src="../../Scripts/knockout.mapping-latest.debug.js" type="text/javascript"></script>    
<script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>    
</head>
<body>

<script type="text/javascript">
    $(function() {
        var model = {
           Name: "john",
           LastName: "doe",
           Rows: [{ Amount: 1, Name: "rik", Description: "desc1" }, { Amount: 2, Name: "rik2", Description: "desc2"}]
        }
        var viewModel= ko.mapping.fromJS(model);

        ko.applyBindings(viewModel);
    });

</script>

<script type="text/x-jquery-tmpl" id="bankTemplate">
<table>
    <tbody data-bind="template: 'bankRowTemplate', foreach: Rows">
    </tbody>
</table>        
</script>

<script type="text/x-jquery-tmpl" id="bankRowTemplate">
        <tr>
            <td>${Amount}</td>
            <td>${Name}</td>
            <td>${Description}</td>
        </tr>
</script>

<input id="first" data-bind="value: Name" />
<input id="first2" data-bind="value: Name" />

<div data-bind="template: 'bankTemplate'"></div>


</body>
</html>

【问题讨论】：

标签： javascript knockout.js jquery-templates

【解决方案1】：

你的<tbody ...>，定义为

<tbody data-bind="template: {name:'bankRowTemplate', foreach: Rows}">

改为

【讨论】：

感谢您的帮助。这些行获得数据绑定的 2 行，但我只在实际 html 中获得 ${ Name} 等，而不是数据绑定值 (Rik)