Question

我有以下扫描。子对象定义

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 biding可能需要做些什么。

Here是小提琴。

Answer 1

我已解决问题所在的问题

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

在此我必须删除multiselect的value属性。我发现如果与selectedOptions中的multiselect一起使用，则会产生问题。虽然如果selectedOptions与下拉列表一起使用，则不会产生任何问题。

绑定不使用默认值

1 个答案: