KnockoutJS：設置選項值打破「與」綁定

我想知道是否有人有任何洞見，爲什麼這個代碼打破。當我刪除返回productID的函數時，tbody data-bind with: chosenProduct工作正常，但將函數留在導致data-bind "value: marketName"引發一個錯誤，指出「Uncaught ReferenceError：無法處理綁定」value：function（） {return marketName}「消息：marketName未定義」。這讓我覺得由於某種原因，chosenProduct沒有被設置爲選擇時的值。KnockoutJS：設置選項值打破「與」綁定

的HTML：

<table> 
    <tr><td><label>Product Name</label></td><td><select id="productSelect" data-bind="options: products, optionsCaption: 'Choose Product',optionsValue: function(i){ return i.productID }, optionsText:'productName', value: chosenProduct, valueUpdate: 'keyup'"></select></td></tr> 
    <tbody data-bind="with: chosenProduct"> 
     <tr><td><label>Market</label></td><td><input type="text" readonly data-bind="value: marketName"></td></tr> 
     <tr><td><label>Client</label></td><td><input type="text" readonly data-bind="value: clientName"></td></tr> 
    </tbody> 
</table>

的JavaScript：

this.products = /* ajax call returns array of product objects*/; 
chosenProduct = ko.observable(); 
    resetProduct = function() { this.chosenProduct(null);};

產品對象：

{productID: 1, marketName: "Test", clientName: "Client1"}

來源

2014-09-29 dmux

@ haim770 chosenProduct通過設置「值：chosenProduct」數據綁定。當用戶從選擇框中選擇一個項目時，具有所選屬性的對象將變成「selectedProduct」。 – dmux 2014-09-29 20:28:57

@ haim770展開我以前的評論：通過讓selectedProduct充當可觀察對象，它允許雙向綁定。它可以由用戶選擇一個選擇選項來設置（如我之前的評論中所提到的）或由Javascript中的函數設置。 – dmux 2014-09-29 20:41:19

看到我的答案。淘汰賽最好還是將實際產品對象作爲'selectedProduct'。使用'ChosenProductID'你可以讀取選擇的ID，如果你看看[writable computed]（http://knockoutjs.com/documentation/computed-writable.html）文檔，你可以修改它，所以當用ID，它會去看你的產品列表中設置正確的一個到'selectedProduct' – 2014-09-29 20:45:02

如果你需要保持optionsValue結合所以chosenProduct純粹是一個可讀/寫的ID，因此您可以在javascript中將其設置爲其他地方，我的其他答案的替代方法是創建一個computed observable，它只顯示當前產品。這然後可以在你的模板結合使用：

this.chosenProductObject = ko.computed(function() { 
    for (x = 0; x < this.products.length; x++) 
     if (this.products[x].productID == this.chosenProduct()) 
      return this.products[x]; 
    return null; 
}, this);

和輕微的調整到您的HTML：

<tbody data-bind="with: chosenProductObject"> 
    <!-- as before --> 
</tbody>

來源

2014-09-29 20:51:41

請注意，在處理這些類型的構造時，「this」指的是什麼 - 在鏈接的文檔頁面上有關於如何設置它的信息。這取決於你如何構建你的視圖模型。 – 2014-09-29 20:53:40

謝謝，我將不得不查看計算的觀測值。 – dmux 2014-09-29 21:19:11

這是你的optionsValue setting的使用。

通過使用這個，你告訴淘汰賽將被選擇的東西的實際值設置爲產品ID。這只是一個數字，並沒有marketName和clientName屬性。解決方法是將其移除。淘汰賽與具有以這種方式選擇的東西效果很好 - 如果你需要在其他地方選擇的產品的實際ID，我建議你的視圖模型創建一個額外的屬性，如：

this.ChosenProductID = ko.computed(function() { 
    if (this.chosenProduct() != null) 
     return this.chosenProduct().productID; 

    return -1; 
}, this);

來源

2014-09-29 20:34:51

好吧，我想我明白了。我最初添加optionValue是因爲我想用jQuery稍後調用它。最初，每個選項的HTML只有一個空白值屬性。您是否認爲使用Knockout提供的optionsAfterRender回調函數添加該值可以讓我滿足這兩個要求？ – dmux 2014-09-29 20:44:24

不 - 把所有東西都留在淘汰賽中，而且幾乎可以忽略任何可以在html中看到的東西。查看我對原始帖子的其他評論，這些評論是關於使用ID來設置所選產品的計算可觀察性的。在文檔中的例子應該讓你去 – 2014-09-29 20:46:35

我有另一個想法 - 我會發布是作爲一個單獨的答案，因爲它來自另一種方法 - 給我2分鐘... – 2014-09-29 20:48:21

KnockoutJS：設置選項值打破「與」綁定

回答

相關問題