淘汰赛3级映射,第3级不变

knockout 3 level mapping, 3rd level doesnt change

我是 KnockoutJS 的新手,我正在尝试为 master-detail ASP.NET MVC 视图创建一个 3 级模型绑定。

这是我尝试在以下屏幕上实现此行为的屏幕:

我有以下 ViewModel 设计

  public class CreateReservationViewModel
{

    public string Title { get; set; }
    public String LogoPath { get; set; }
    public string StartDate { get; set; }
    public string EndDate { get; set; }
    public string StartTime { get; set; }
    public string EndTime { get; set; }
    public int TimeSpan { get; set; }
    public int MinPersons { get; set; }
    public int MaxPersons { get; set; }
    public List<ReservationOptionViewModel> ReservationOptions { get; set; }
    public string MessageToClient { get; set; }
    public CreateReservationViewModel()
    {
        ReservationOptions = new List<ReservationOptionViewModel>();
    }
}

 public class ReservationOptionViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public int TypeId { get; set; }
    public string TypeDescription { get; set; }
    public string Info { get; set; }
    public List<ValuesViewModel> ReservationOptionValues { get; set; }
    public ReservationOptionViewModel()
    {
        ReservationOptionValues = new List<ValuesViewModel>();
    }
}

public class ValuesViewModel
{
    public int Id { get; set; }
    public string ValueTitle { get; set; } // this value i cant seem to get to bind user input always defaults to whatever i set it in knockout 
}

这是我的 .js 和 .html https://jsfiddle.net/camLpdty/

尽管我能够成功绑定第一级和第二级,但第三级绑定始终采用默认值,即:[({ Id: 0, ValueTitle: "this is read only and cant change"})] }

其他一切似乎都正常...

从您的 jsfiddle 来看,Values 列的绑定上下文似乎有点偏离。 data-bind="value: Values.ValueTitle" - 这里的 Values 是一个数组,但您正试图将单个输入框绑定到它。它不知道要使用哪个元素的 ValueTitle,所以它可能没有绑定到任何东西。您需要使用 "foreach" 或更改显示该信息的方式

作为快速测试,您可以尝试更改最后一个绑定:

<td>
    <input class="form-control input-sm" 
        data-bind="value: ReservationOptionValues.ValueTitle" />
</td> 

<td data-bind="foreach: ReservationOptionValues">
    <input class="form-control input-sm" data-bind="value: ValueTitle" />
</td>

这将为 Values 数组中的每个元素创建一个输入框,因此您可能不希望这样保留它,但它应该突出显示剔除上下文问题