淘汰赛3级映射，3级不变答案

【问题标题】：knockout 3 level mapping, 3rd level doesnt change淘汰赛3级映射，3级不变
【发布时间】：2018-04-08 10:26:35
【问题描述】：

我是 KnockoutJS 的新手，我正在尝试创建一个 3 级模型绑定，用于主从 ASP.NET MVC 视图。

这是我尝试在其上实现此行为的屏幕：

我有以下 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"})] }

其他一切似乎都有效......

【问题讨论】：

第三层在初始数据加载时是否有默认值，还是仅在单击“添加选项”时有默认值？您希望它在什么时候具有默认值以外的值？
好吧，您的代码在我尝试处理它时不断变化，但上次我在您的小提琴中看到 html 时，看起来 Values 列的绑定上下文有点偏离。 data-bind="value: Values.ValueTitle" - 这里的 Values 是一个数组，但您试图将单个输入框绑定到它。它不知道要使用哪个元素的 ValueTitle，因此它可能没有绑定到任何东西。您需要使用“foreach”或更改显示该信息的方式。
非常感谢您的帮助，我删除了代码以避免混淆，但是因为您尝试复制它！我把一切都恢复到现在的状态。因此，为了回答您的问题，当用户单击“添加选项”时，第三级具有默认值，我希望当用户在其中添加一些文本并单击“添加选项”后，它会获得用户输入。我把小提琴放回去供你参考jsfiddle.net/camLpdty谢谢！！！

标签： asp.net-mvc knockout.js knockout-3.0

【解决方案1】：

从您的 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 数组中的每个元素创建一个输入框，因此您可能不希望这样，但它应该突出显示敲除上下文问题

【讨论】：