jsFiddle - 选择逻辑

时间:2012-04-08 18:02:16

标签: knockout.js

我已经开始了一个jsFiddle,看看是否有人可以帮助我解决问题 我尝试使用cascanding选择的逻辑问题 添加了字幕。它正在部分运作

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

我有两个选择,并希望添加标题以建议用户 该做什么和期待什么。我尝试过使用ko.computed作为Flo 建议但我的逻辑仍然不对。

这是逻辑

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

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

1 - 如果视图模型的POSTER ARRAY LIST为空,我添加'No Posters' 标题选择1。我还为select2'No Clients'添加了一个标题 禁用两个选择

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

         if the selected Poster object has no ClientSite array, I 

为select2'无客户'

添加标题
         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'选择海报'

         if the selected Poster object has no ClientSite array, I 

为select2'无客户'

添加标题
         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

中显示'Select Client'

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

请有人分享一些亮点吗?

干杯

C

1 个答案:

答案 0 :(得分:0)

问题是当您在select1中选择“选择海报”值时。 selectedPoster observable设置为undefined。您的第二个选择包含依赖于此值的绑定,而不是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/

希望这有帮助。