在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中填充基于先前选择的选择菜单的选择菜单

回答

相关问题