2013-12-19 55 views
0

我有以下scanrio。 子对象认定中绑定不能使用默认值

function SearchFilterOption(data){ 
    var self = this 
    self.FilterCheck  = ko.observable(false) 
    self.List    = ko.observableArray([]) 
    self.SelectedOptions = ko.observableArray([]) 
    self.FilterText   = ko.computed(function(){ 
     var selectedDescriptions = []; 
     ko.utils.arrayForEach(self.List(), function (item) { 
      if (in_array(item.Value, self.SelectedOptions())) 
       selectedDescriptions.push(item.Description) 
     }) 
     return selectedDescriptions.join(',') 
    }) 
    self.FilterLabel  = ko.computed(function(){ 
     return (self.SelectedOptions() && self.SelectedOptions().length > 0) ? 'selected_filter' : '' 
    }) 
    self.FilterClass  = ko.computed(function(){ 
     self.List(data) 
     return (self.FilterCheck() == true) ? 'set_check':'un_check'    
    }) 

    self.Toggle = function(){ 
     self.FilterCheck(!self.FilterCheck()) 
    } 
} 

父模型

var page = function() { 
    var self = this 
    self.LookupData = ko.observableArray() 
    self.Countries = ko.observableArray([]) 

    self.LoadData = function(){ 
     self.GetProfileData() 
     self.GetPreviousSearch() 
    } 

    self.GetProfileData = function(){ 
     var url  = 'ProfileApi/Index' 
     var type = 'GET' 
     var data = null 
     ajax(url , data , self.OnGetProfileDataComplete , type)      
    } 
    self.OnGetProfileDataComplete = function(data){ 
     self.LookupData(getLookupData()) 
     self.Countries(new SearchFilterOption(self.LookupData().Countries)) 
    } 

    self.GetPreviousSearch = function(){ 
     var url  = 'SearchApi/PreviousSearch' 
     var type = 'GET' 
     var data = null 
     ajax(url , data , self.OnGetPreviousSearchComplete , type)     
    } 
    self.OnGetPreviousSearchComplete = function(data){ 
     var search = data.Payload 
     if(search.locationCountryList){self.Countries().SelectedOptions(self.MakeInt(search.locationCountryList))} 
    } 

    self.MakeInt = function(array){ 
     return array.map(function(item) { 
      return parseInt(item, 10); 
     })    
    } 

    self.LoadData() 
} 

和有约束力的

$('document').ready(function() { 
     ko.applyBindings(new page()) 
}) 

<div data-bind="with:Countries"> 
    <ul class="srh_fltr"> 
     <li> 
      <label class="" data-bind="css:FilterLabel">Countries</label> 
      <p data-bind="text:FilterText"></p> 
      <div class="check_box"> 
       <a class="un_check active" data-bind="css:FilterClass,click:Toggle"> 
        <img src="../images/spacer.gif"> 
       </a> 
      </div> 
     </li> 
    </ul> 
    <section class="form_view" data-bind="visible:FilterCheck"> 
    <select multiple="multiple" data-bind=" 
      options:List, 
      optionsText:"Description", 
      optionsValue:"Value", 
      optionsCaption:"--- ", 
      value:0, 
      selectedOptions:SelectedOptions"></select> 
    </section> 
</div> 

下面是一些查询的数据样本

[{ 
    "Value": 1, 
    "Description": "United States" 
}, { 
    "Value": 2, 
    "Description": "Canada" 
}, { 
    "Value": 3, 
    "Description": "United Kingdom" 
}, { 
    "Value": 4, 
    "Description": "Pakistan" 
}, { 
    "Value": 5, 
    "Description": "India" 
}, { 
    "Value": 6, 
    "Description": "Saudi Arabia" 
}, { 
    "Value": 7, 
    "Description": "U.A.E." 
}, { 
    "Value": 8, 
    "Description": "Afghanistan" 
}, { 
    "Value": 9, 
    "Description": "Albania" 
}] 

确定。代码完整。问题是,当GetPreviousSearch被调用,并且self.Countries().SelectedOptions()被填充时,没有被选中。我的意思是不显示FilterText。我在控制台中看到该对象包含由GetPreviousSearch填充的数据,但ui不会更改?我该如何解决这个问题。我怀疑with可能不得不采取一些措施。

Here是小提琴。

+0

有没有可能把小提琴放在这里? – DevelopmentIsMyPassion

+0

@AshReva看到小提琴[这里](http://jsfiddle.net/raheelshan/afCD4/23/) –

+0

你的小提琴有错误。这是什么“in_array”使用?这是功能吗? – DevelopmentIsMyPassion

回答

0

我已经解决了这个问题,这个问题是在这里

<select multiple="multiple" data-bind=" 
     options:List, 
     optionsText:"Description", 
     optionsValue:"Value", 
     optionsCaption:"--- ", 
     value:0, 
     selectedOptions:SelectedOptions"></select> 
</section> 

在此我不得不删除属性值为多选。我发现如果在multiselect中使用selectedOptions,则会产生问题。虽然如果selectedOptions与下拉菜单一起使用,它不会造成任何问题。