选择可观察的值和文本

Posted 2023-03-27

【中文标题】选择可观察的值和文本

【英文标题】：Select value and text observable dependently

【发布时间】：2016-01-18 20:11:59

【问题描述】：

我在服务器端创建模型，并像 ViewModel 一样使用它进行淘汰赛。 我的问题是绑定到选择值对象code, name 或任何想法如何在更改代码值也更改名称时进行，我需要选择文本和值将独立观察

我的模型 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 页面

     <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>

或者在更改 Address.country.code 时进行一些事件也更改了 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"

我需要同时更改键/值对

请帮助任何想法。

【问题讨论】：

试试value: Address.country 换成select。

@sunna 试试这个jsfiddle.net/supercool/LkqTU/27321

@Dandy 我试过没用

@sunna 你看过我发布的小提琴吗？如果某些东西不起作用，请分享您收到的控制台错误

@supercool，我需要 Address.country.name 计算出可观察的 Address.country.code，我不仅需要显示选择选项的值，还需要显示文本。在所有过程之后，我应该将我的模型序列化为 json 格式并将其保存在数据库中，比如 clob

【参考方案1】：

也许它不起作用，因为您在值更改时覆盖了 observabe Address.country.name

<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>