knockout.js选择元件结合失去后续形式提交值

我有一个淘汰赛视图模型得到从JSON调用填充。在的形式的选择元件，我有一组选项（也来自视图模型来），并且值的observableArray一部分。问题仅在于select元素而不是输入值 - 提交表单时，只有在select中分配的值才包含正确的值。因此，从JSON成功加载并以表单呈现但保持不变的那些将作为options数组中的第一个值发送回服务器。knockout.js选择元件结合失去后续形式提交值

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 ScaledCostEntries observableArray的一部分。（另外，如果我交换值和选项的顺序，那么不会在select元素中放入选定的值）。

和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>

因此，要总结，这个问题是绑定到select元素视图模型的财产。当选择保持不变（未重新选择）时，视图模型将其值作为选项（InvoiceTypes）数组中的第一项发送到服务器时的值。最后，我可能会忘记一些微不足道的东西，这是我第一次更加认真的淘汰赛。

注意：InvoiceType是ScaledCostEntries的一部分，它是observableArray。 InvoiceTypes是observableArray。两个InvoiceTypes和ScaledCostEntries，来自JSON和ScaledCostEntries送回。

来源

2013-03-20 Stanislav Stoyanov

你可以把Chrome或其他浏览器的调试器的暂停在Ajax调用的开始，看到的是在该self.ScalsedCostEntries阵列？ – zmanc 2013-03-20 14:16:02

@zmanc：是的，已经做到了。如果我重新选择了它们，值就很好。如果我没有做任何事情来形成或重新选择另一行的值，那么未编辑的将包含select选项中的第一个元素--InvoiceTypes [0]。 – 2013-03-20 14:19:51

我的假设是，这是由于如何ScaledCostEntries正在对表单提交的服务器上进行处理。

当我有一个正在被添加和删除的依赖模型列表的主模型，并且对主模型进行了表单提交时，我已经遇到了问题（跨越各种服务器端框架）更新一切。

的问题是，表单提交，当在请求中的值被映射到服务器端模型中，空白值取为表示“没有变化”，而不是“删除此”。这可以直接在模型上直接使用属性，但对依赖模型列表不起作用。

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

来源

2013-03-20 14:37:00 Nate

感谢您的回答@Nate。这让我想到了，所以我通过向选项数组添加了一个额外（空的）值（作为第一个）来解决问题，所以无论何时该值未被编辑并发送回服务器，它都会包含空值，而我将能够处理它的服务器端。 – 2013-03-21 07:30:24

但是，这仍然不能解决或解释select元素的古怪行为。 – 2013-03-21 07:31:19

你可以发布一个来自'@ Request.Url.PathAndQuery'的JSON的例子吗？我能想到的唯一影响就是ScaledCostEntries.InvoiceType字段中的值与InvoiceTypes中的选项列表不匹配。但是，您还应该在视图中看到在该条目上设置的第一个值。 – Nate 2013-03-22 12:36:13

knockout.js选择元件结合失去后续形式提交值

回答

相关问题