0

我有一个从 JSON 调用中填充的淘汰视图模型。在表单中的选择元素中，我有一组选项（也来自视图模型）和值，部分observableArray. 问题仅在于 select 元素，而不在于 input 元素——提交表单时，只有在 select 中分配的值包含正确的值。因此，从 JSON 成功加载并以表单形式呈现但保持不变的那些将作为选项数组中的第一个值发送回服务器。

HTML 表单：

<form>
    <table >
        <thead>
            ...
        </thead>
        <tbody data-bind='foreach: ScaledCostEntries'>
            <tr>
                <td><input data-bind='value: StartDateString' class="startdate" type="text"/></td>
                <td><select data-bind='value: InvoiceType, options: $root.InvoiceTypes'></select></td>                    
                <td><a href='#' data-bind='click: $root.removeCost'>Delete</a></td>
            </tr>
        </tbody>

    </table>
    <button data-bind='click: addCost'>Add New Row</button>
    <button data-bind='click: save' >Update</button>
</form>

在上面的这段代码中，问题在于 InvoiceType，它是 viewmodels ScaledCostEntriesobservableArray 的一部分。（此外，如果我交换值和选项的顺序，则不会在选择元素中放置选定的值）。

和JS：

<script type="text/javascript">
    $(function () {
        var scaledCostModel = function () {
            var self = this;

            self.ScaledCostEntries = ko.observableArray([]);
            self.InvoiceTypes = ko.observableArray([]);

            self.addCost = function () {
                self.ScaledCostEntries.push({                    
                    StartDateString: ko.observable(),
                    InvoiceType: ko.observable()
                });
            };

            self.removeCost = function (cost) {
                cost.IsDeleted = true;
                self.ScaledCostEntries.destroy(cost);
            };

            self.save = function (form) {
                jQuery.ajax({
                    url: '@Request.Url.PathAndQuery',
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: ko.toJSON(self.ScaledCostEntries)                    
                });
            };
        };

        jQuery.getJSON('@Request.Url.PathAndQuery', function (data) {
            ko.mapping.fromJS(data, {}, viewModel);
        });

        var viewModel = new scaledCostModel();

        ko.applyBindings(viewModel);
    });
</script>

因此，总而言之，问题在于 viewmodel 的属性绑定到选择元素。When the select is left unchanged (not reselected), the viewmodel will have it's value as the first item from the options ( InvoiceTypes) array, when posting to server. 最后，我可能忘记了一些微不足道的事情，这是我第一次更认真的 knockout.js 尝试。

注意：InvoiceType是 的一部分ScaledCostEntries，即observableArray. InvoiceTypes是observableArray。InvoiceTypes和,都ScaledCostEntries来自 JSON 并被ScaledCostEntries发回。

4

1 回答 1

3

我的假设是，这是由于ScaledCostEntries表单提交时服务器上的处理方式所致。

我之前遇到过这个问题（跨各种服务器端框架），当时我有一个主模型，其中包含正在添加和删除的依赖模型列表，并且针对主模型完成了表单提交以更新所有内容。

问题是在表单提交过程中，当请求中的值被映射到服务器端模型时，空白值被认为是“没有变化”而不是“删除这个”。这适用于直接在模型上的属性，但不适用于依赖模型的列表。

我发现有几种方法可以解决这个问题：使用 Ajax 删除底层模型并在视图中按下“删除”或“删除”按钮时更新与主模型的关系；或者每次都显式发送整个模型列表，并为每个表单提交显式删除并重建服务器上的列表。每种方法都适用于不同的情况，并且可能还有其他方法也可以很好地工作。

于 2013-03-20T14:37:00.983 回答