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選擇元件結合失去後續形式提交值

回答

相關問題