1

我已经启动了一个 jsFiddle,看看是否有人可以帮助我解决我在尝试使用带有添加标题的级联选择时遇到的逻辑问题。它正在部分工作

http://jsfiddle.net/cleytonjordan/4cDdD/4/

我有两个选择,并想添加标题以建议用户做什么和期望。我曾尝试按照 Flo 的建议使用 ko.computed,但我的逻辑仍然不正确。

这就是逻辑

select1 = 海报选择 select2 = 客户选择

一张海报可以有很多客户。

1 - 如果视图模型的海报阵列列表为空,我将“无海报”标题添加到 select1。我还为 select2 'No Clients' 添加了一个标题并禁用了两个选择

2 - 如果视图模型的 POSTER ARRAY LIST 只有一个项目,我将显示当前项目并且没有标题

         if the selected Poster object has no ClientSite array, I 

为 select2 'No Clients' 添加标题

         if the selected Poster object has only one item in the 

ClientSite 数组,我在 select2 中显示当前 ClientSite 项并禁用 select2

         if the selected Poster object has a collection of 

ClientSites,我在 select2 中显示“选择客户端”标题

3 - 如果视图模型的 POSTER LIST 有很多项目,我会在 select1 'Select Poster' 中显示一个标题

         if the selected Poster object has no ClientSite array, I 

为 select2 'No Clients' 添加标题

         if the selected Poster object has only one item in the 

ClientSite 数组,我显示该项目并禁用 select2

         if the selected Poster object has more than one item in 

ClientSite 数组,我在 select2 中显示“选择客户端”

当我在 select1 中选择一个在 ClientSite 中有项目的项目,然后返回到标题“选择海报”时,我收到一个错误。我认为这样做的原因是我正在从一个对象更改为一个字符串,但 select2 期待一个对象。

请问有人可以分享一些光吗?

干杯

C

4

1 回答 1

0

问题是当您在 select1 中选择“选择海报”值时。selectedPoster observable 设置为未定义。您的第二个选择包含依赖于该值的绑定,该值不是 null/undefined,因此会出现错误。

一个简单的解决方法是通过使用一些计算变量来保护第二个选择不受此状态的影响。

self.ClientOptions = ko.computed(function() {
    if (self.selectedPoster()) {
        return self.selectedPoster().ClientSite();
    }
    return [];
});

self.ClientOptionsDisabled = ko.computed(function() {
   if (self.selectedPoster()) {
      return !(self.selectedPoster().ClientSite());
   }
   return false;
});

并更改您的标记

<select id="Select2" data-bind="options: ClientOptions, optionsText: 'ClientName'
, optionsCaption:select2OptionsCaption(), value: selectedClient, 
disable: ClientOptionsDisabled"></select> 

这是一个小提琴。

http://jsfiddle.net/madcapnmckay/sDt4r/

希望这可以帮助。

于 2012-04-13T17:47:09.333 回答