with binding not working with default values

None

by Muhammad Raheel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="https://raw.github.com/kvz/phpjs/master/functions/array/in_array.js"></script>
<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>

JavaScript

function SearchFilterOption(data) {
    var self = this
    self.FilterCheck = ko.observable(true)
    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())
    }
}

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

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

    self.GetProfileData = function () {
        var lookupdata = [{
            "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"
        }]

        self.Countries(new SearchFilterOption(lookupdata))
    }

    self.GetPreviousSearch = function () {
     ...