Select value and text observable dependently

Question

I create Model in server side and use it likes ViewModel for knockout. My problem is bind to select value object{code, name} or any idea how to make when changed code value also changed name, I need that select text and value will observable dependently

My Model c#

public class Model
{
    public ClientInfo ClientInfo = new ClientInfo();
    public Address Address = new Address();
    public SearchInfo SearchInfo = new SearchInfo();
}

public class ClientInfo
{
    public string firstname = "Sunnatilla";
    public string lastname = "Axakalov";      
}


public class Address
{
    public List<CodeName> countries = new List<CodeName>();
    public CodeName country = new CodeName();
    public List<CodeName> cities = new List<CodeName>();
    public CodeName city = new CodeName();
}

public class CodeName
{
    public string code = "2";
    public string name = "Russia";

    public CodeName(){}

    public CodeName(string code, string name)
    {
        this.code = code;
        this.name = name;
    }
}


public class SearchInfo
{
    public bool NewClient = true;
}

Aspx Page

     <select id="address" data-bind="options: Address.countries,
                                     optionsText: 'name',
                                     optionsValue: 'code',
                                     value: Address.country.code,
                                     event: { change: Address.country.name = ko.utils.arrayFirst(Address.countries, function (country) { if (country.code === Address.country.code) return country.name }) }"></select>

    <span data-bind="text: Address.country.code"></span>
    <span data-bind="text: Address.country.name"></span>

    <script>

        $("#out").html('<%=this.model %>');

        var jsonModel = JSON.parse('<%=this.model %>');
        // jsonModel = {"ClientInfo":{"firstname":"Sunnatilla","lastname":"Axakalov"},"Address":{"countries":[{"code":"1","name":"Kazakhstan"},{"code":"2","name":"Russia"},{"code":"3","name":"China"}],"country":{"code":"2","name":"Russia"},"cities":[],"city":{"code":"2","name":"Russia"}},"SearchInfo":{"NewClient":true}}


        function ViewModel() {
            ko.mapping.fromJS(jsonModel, {}, this); // here I creatre my view model, all childs recursively observable
        }

        var viewModel = new ViewModel();

        ko.applyBindings(viewModel);
    </script>

Or make some event when changed Address.country.code also changed Address.country.name

  if select option value changed Address.country.code = 1   => Address.country.name = "Kazakhstan"
  if select option value changed Address.country.code = 2   => Address.country.name = "Russia"
  if select option value changed Address.country.code = 3   => Address.country.name = "China"

I need change pair key/value simultaneously

Please help any idea.

@sunna have you gone through the fiddle i posted . if something isn't working share the console error you getting — super cool
@super cool, I need Address.country.name computed observable Address.country.code, I need show not only value of select option also text. After all process I should serialize my Model to json format and save it in database likes clob — sunna

Alex J. Alex J. · Accepted Answer · 2015-10-23T07:44:30

Maybe it doesn't work because you're overriding an observabe Address.country.name when value changes

<select id="address" data-bind="options: Address.countries,
                                 optionsText: 'name',
                                 optionsValue: 'code',
                                 value: Address.country.code,
                                 event: { change: Address.country.name(ko.utils.arrayFirst(Address.countries, function (country) { if (country.code === Address.country.code) return country.name }) })"></select>

Select value and text observable dependently

1 Answers