如何将依赖选项值放入knockoutJs中的隐藏输入字段

Question

我正在尝试将选定的输入值放入隐藏字段，到目前为止，有谁可以帮助我，因为我正在尝试下面的代码。

Html

<select data-bind="options: packages,
                   optionsCaption: 'Select...',
                   optionsText: 'name',
                   value: selectedPackage">                 
</select>
</br>
<!-- ko with : selectedPackage -->
</br>
<select data-bind="options: locationOptions,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   value: $parent.selectedLocation">
</select>
<!-- /ko  -->

显示值位于

<span data-bind="with: selectedPackage">
        <b data-bind="text: name"></b> 
            <!-- ko with : $parent.selectedLocation -->
                > <b data-bind="text: location"></b>
            <!-- /ko  -->
    </span>
            </td>
            <td>
                <span data-bind="with: selectedPackage">
                <b data-bind="text: price"></b> $ +  
            <!-- ko with : $parent.selectedLocation -->
                $<b data-bind="text: price"></b>
            <!-- /ko  -->
    </span>

Js/Knockout代码

    this.packages = [
    {
        sku : "306",
        name: "Standard delivery hours (8-4)",
        description: "its nice",
        price: 99,
        locationOptions : []
    },
    {
        sku : "100",
        name: "Within a 4 hour window (adds $15)",
        description: "its nice",
        price: 100,
        locationOptions : [
            { location: "6:00 AM - 10:00 AM (off hours)", price: 15},
            { location: "6:30 AM - 10:30 AM (off hours)", price: 15},
            { location: "7:00 AM - 11:00 AM (off hours)", price: 15}
        ]
    },
    {
        sku : "101",
        name: "Within a 2 hour window (adds $25)",
        description: "its cool",
        price: 100,
        locationOptions : [
            { location: "8:00 AM - 10:00 AM", price: 25},
            { location: "10:00 AM - 12:00 PM", price: 25},
            { location: "12:00 AM - 02:00 PM", price: 25}
        ]
    },
    {
        sku : "102",
        name: "Within a 1 hour window (adds $40)",
        description: "its cool",
        price: 100,
        locationOptions : [
            { location: " 8:00 AM - 9:00 PM", price: 40},
            { location: "9:30 AM - 10:00 PM", price: 40},
            { location: "10:00 AM - 11:00 PM", price: 40}
        ]
    }
];


    this.selectedPackage = ko.observable();

一切运行正常，但我试图将选定的依赖值放入隐藏字段中，但值不会呈现。

<input id="return_order_dependent" type="hidden" name="return_order_dependent" data-bind='value: selectedPackage().name' />

Answer 1

问题是selectedPackage可以是null或undefined。无论何时发生这种情况，您的value数据绑定都会抛出一个错误：

抛出Cannot read property 'name' of undefined，selectedPackage().name变成undefined.name

undefined/null值是optionsCaption绑定的结果。如果没有标题，knockout会在应用select绑定时将您选择的值设置为列表中的第一个元素。

你需要做两件事：

1. 确定如何指示未设置的值
2. 确保数据绑定不会中断。

就我个人而言，我会在视图模型中使用计算并管理未设置的状态：

this.hiddenInputValue = ko.pureComputed(() => {
  return (this.selectedPackage() || { name: "NOT_SET" }).name;
});

使用数据绑定：

<input type="hidden" data-bind='value: hiddenInputValue' />

您还可以将此逻辑放入数据绑定本身(本例默认为null)

<input type="hidden" data-bind='value: selectedPackage() ? selectedPackage().name : null' />

其他解决方案方向包括：

删除optionsCaption，始终通过在隐藏输入周围选择if或with来选择第一个值(这可能不适用于与服务器相关的内容)