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是小提琴。
有没有可能把小提琴放在这里? – DevelopmentIsMyPassion
@AshReva看到小提琴[这里](http://jsfiddle.net/raheelshan/afCD4/23/) –
你的小提琴有错误。这是什么“in_array”使用?这是功能吗? – DevelopmentIsMyPassion