绑定对象的列表与静态行和动态列的表值

Question

我在一个asp.net MVC应用程序创建与编辑的单元格的表，用Knockoutjs

鉴于这种C＃视图模型

[Serializable] 
public class Step4 { 
    public IList<Projection> Projections { get; set; } 
} 

public class Projection : IYear { 
    public int Id { get; set; } 
    public string Turnover { get; set; } 
    public string DirectCostOfOperation { get; set; } 
} 

结合

和表

   <table class="table table-condensed table-bordered" style="background-image: none;"> 
       <thead> 
        <tr class="bg-blueberry white" style="background-image: none;"> 
         <th class="text-center" style="width: 250px">Years</th> 
         <th class="text-center">@Model.Step4.Projections[0].Id</th> 
         <th class="text-center">@Model.Step4.Projections[1].Id</th> 
         <th class="text-center">@Model.Step4.Projections[2].Id</th> 
         <th class="text-center">@Model.Step4.Projections[3].Id</th> 
         <th class="text-center">@Model.Step4.Projections[4].Id</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <th class="bg-carbon white" colspan="6">PROFIT AND LOSS ACCOUNT</th> 
        </tr> 
        <tr> 
         <th class="italic font-normal">Turnover</th> 
         <td><input data-bind="value: Model.Step4.Projections[0].Turnover" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[1].Turnover" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[2].Turnover" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[3].Turnover" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[4].Turnover" /></td> 
        </tr> 
        <tr> 
         <th class="italic font-normal">Direct Cost of Operations</th> 
         <td><input data-bind="value: Model.Step4.Projections[0].DirectCostOfOperation" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[1].DirectCostOfOperation" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[2].DirectCostOfOperation" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[3].DirectCostOfOperation" /></td> 
         <td><input data-bind="value: Model.Step4.Projections[4].DirectCostOfOperation" /></td> 
        </tr> 
        <tr> 
         <th class="text-right bg-lightcarbon white">Gross Profit</th> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </tbody> 
      </table> 

正如你所看到的第一列包含该行的标题，然后每年的值。

目前，我想绑定的单个项目可编辑的细胞，这是造成这个错误是：

SCRIPT5007：无法获取的未定义或为空引用属性离职“

从研究中，建议使用Foreach重复列将是解决此问题的更好方法。

请问，有人可以告诉或告诉我如何重复静态行中的列？

解决方案： 使用丹尼斯的想法，我在我的表更新，以这样的：

<tr> 
    <th class="italic font-normal">Turnover</th> 
    <!-- ko foreach: Model.Step4.Projections --> 
    <td><input data-bind="value: Turnover, uniqueName: true" /></td> 
    <!-- /ko --> 
</tr> 
<tr> 
    <th class="italic font-normal">Direct Cost of Operations</th> 
    <!-- ko foreach: Model.Step4.Projections --> 
    <td><input data-bind="value: DirectCostOfOperation, uniqueName: true" /></td> 
    <!-- /ko --> 
</tr> 

感谢。

Answer 1

控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var p1 = new Projection() { Id = 1, DirectCostOfOperation = "111", Turnover = "100" }; 
     var p2 = new Projection() { Id = 2, DirectCostOfOperation = "222", Turnover = "200" }; 
     var p3 = new Projection() { Id = 3, DirectCostOfOperation = "333", Turnover = "300" }; 
     var p4 = new Projection() { Id = 4, DirectCostOfOperation = "444", Turnover = "400" }; 
     var p5 = new Projection() { Id = 5, DirectCostOfOperation = "555", Turnover = "500" }; 

     Step4 step = new Step4(); 
     step.Projections = new List<Projection> { p1, p2, p3, p4, p5 }; 

     return View(step); 
    } 
} 

[Serializable] 
public class Step4 
{ 
    public IList<Projection> Projections { get; set; } 
} 

public class Projection : IYear 
{ 
    public int Id { get; set; } 
    public string Turnover { get; set; } 
    public string DirectCostOfOperation { get; set; } 
} 

public interface IYear 
{ 
    int Id { get; set; } 
    string Turnover { get; set; } 
    string DirectCostOfOperation { get; set; } 
} 

检视：

@model Example.Controllers.Step4 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 

<table class="table table-condensed table-bordered" style="background-image: none;"> 
    <thead> 
     <tr class="bg-blueberry white" style="background-image: none;"> 
      <th class="text-center" style="width: 250px">Years</th> 
      @foreach (var projection in Model.Projections) 
      { 
       <th class="text-center">@projection.Id</th> 
      } 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th class="bg-carbon white" colspan="6">PROFIT AND LOSS ACCOUNT</th> 
     </tr> 
     <tr> 
      <th class="italic font-normal">Turnover</th> 
      @foreach (var projection in Model.Projections) 
      { 
       <th class="text-center">@projection.Turnover</th> 
      } 
     </tr> 
     <tr> 
      <th class="italic font-normal">Direct Cost of Operations</th> 
      @foreach (var projection in Model.Projections) 
      { 
       <th class="text-center">@projection.DirectCostOfOperation</th> 
      } 
     </tr> 
     <tr> 
      <th class="text-right bg-lightcarbon white">Gross Profit</th> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

输出：