knockoutjs 테이블과의 바인딩 문제

어레이가있는 뷰 모델을 테이블에 바인딩하는 데 문제가 있습니다. 테이블에 대한 템플릿과 행에 대한 템플릿이 있습니다. 테이블이 생성되었지만 행이 생성되지 않았습니까? 아이디어가 있습니까?knockoutjs 테이블과의 바인딩 문제

코드는 다음과 같습니다

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

출처

2011-09-10 Medo

당신의 <tbody ...>는

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

로 대신

출처

2011-09-10 12:05:49

덕분에 조금 도움이되도록 정의. 행은 데이터 바인딩 2 행을 얻지 만, 실제 HTML에서는 $ {Name} 등만 가져옵니다 (Rik) – Medo

여기 작업 예제가 있습니다 : [jsFiddle] (http://jsfiddle.net/majorbyte/z5XZk /) –

knockoutjs 테이블과의 바인딩 문제

답변

관련 문제