在KnockoutJS中填充基於先前選擇的選擇菜單的選擇菜單

我搜索了高和低，並沒有完全找到答案，我回答我的問題，所以我希望我沒問題。在KnockoutJS中填充基於先前選擇的選擇菜單的選擇菜單

我正在學習Knockout JS，我試圖在Wordpress插件中使用它。我試圖從外部API中提取數據，然後根據這些數據填充菜單<select>。

這是可以正常使用，但我跑進問題是填充與秒<select>菜單之前選擇的對象的pricing_parameters。

從我收集的內容中，我可以將optionsValue設置爲對象的其中一個屬性，如serviceId或serviceName。我嘗試設置它serviceParams但是返回[object Object]。

此外，是不是會禁止我顯示serviceName的第一個<option>選中？如果是這樣，處理這些信息的正確方法是什麼，以便它可以在多個領域使用？

下面是一個例子響應：（的jsfiddle它下面）

{"services":[{ 
    "id":1, 
    "code":"A", 
    "name":"Service 1", 
    "price":110.0, 
    "hourly":false, 
    "maids_minimum":1, 
    "maids_maximum":1, 
    "hours_minimum":1, 
    "hours_maximum":1, 
    "extras":[{ 
    "id":1,"name":"Extra 1","price":10.0,"quantity_based":true 
    },{ 
    "id":2,"name":"Extra 2","price":20.0,"quantity_based":false 
    }], 
    "pricing_parameters":[{ 
    "id":1,"name":"Example pricing parameter","price":12.0,"quantity_minimum":1,"quantity_maximum":3 
    }] 
},{ 
    "id":2, 
    "code":"B", 
    "name":"Service 2", 
    "price":35.0, 
    "hourly":true, 
    "maids_minimum":1, 
    "maids_maximum":3, 
    "hours_minimum":2, 
    "hours_maximum":4, 
    "extras":[], 
    "pricing_parameters":[] 
}]}

這裏是一個JSFiddle。

來源

2015-10-28 Ellenbrook

這裏只是一些事情，1）您將optionsValue設置爲服務Id，使得框架僅將id傳遞給selectedService observable 2）如果您設置了「with」範圍，則不需要與在該範圍內再次引用，而且3）選擇標記沒有匹配的標籤

<select class="form-control" id="bedrooms" data-bind="options: services, optionsText: 'serviceName', value: serviceSelected, event:{change: logIt}"> 
</select> 
<!-- ko with: serviceSelected--> 
    <select class="form-control" data-bind="optionsText: 'name',options:serviceParameters"></select> 
<!-- /ko -->

做出這個小提琴http://jsfiddle.net/59hca470/1/

來源

2015-10-28 15:28:21

哇的變化，這是如此簡單，我簡直不敢相信。我花了幾個小時在這！如果可能，你能否詳細說明＃2？我不確定我是否遵循。 – Ellenbrook

很高興我可以幫助...所以在你的小提琴中，我看到你說「<！ - ko with：serviceSelected（） - >」...所以任何數據綁定在該範圍內（ ...將直接訪問serviceSelected上的觀察值，所以你沒有說「serviceSelected（）。serviceParameters」。框架將解釋爲「serviceSelected.serviceSelected（）.serviceParameters」是否有意義？ –

這是非常有道理的。把select和serviceSelected配對，剩下的就暗示了，天哪，你真是一個救命的人！ – Ellenbrook

在KnockoutJS中填充基於先前選擇的選擇菜單的選擇菜單

回答

相關問題