Knockoutjs绑定问题与表

knockoutjs binding troubles with table

本文关键字:问题 绑定 Knockoutjs      更新时间:2023-09-26

我有麻烦绑定一个视图模型与数组表。我有一个表模板和一个行模板。表创建的行是不是?什么好主意吗?

代码是:

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

您的<tbody ...>,定义为

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