分别选择value和text observable
Select value and text observable dependently
我在服务器端创建模型,并使用它像ViewModel进行knockout。我的问题是绑定选择值对象{code, name}或任何想法如何使当改变代码值也改变名称,我需要选择文本和值将可观察的依赖
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页
<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"
我需要同时更改对键/值
也许它不起作用,因为当值变化时,你重写了一个可观察的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>
相关文章:
- 如何将输入(type=text)从html表单传递到javascript函数
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- 在文本区域中使用jQuery.text()保持换行符
- 用Javascript添加带有#text的tr元素
- 当用户按下回车键时,自动在text区域/text中插入消息
- 修正案'text'的元素
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- W3验证器->使用<脚本类型=“;text/javascript”>在html的正文中
- 我如何在INPUT TEXT中使用这个Javascript和jQuery
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 从所有下拉菜单中选择val和text
- Knockout observable没有观察到其中一个属性
- 节点,express应用程序返回text/javascript响应头(Content-Type),尽管设置了applic
- .val()返回未定义的.text返回随机代码
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- type=text/javascript和language=javascript之间的区别
- 如何在RxJS 5中创建Hot Observable
- 如何使用tspan拆分Ext.draw.text中的长文本
- text()显示双文本
- 分别选择value和text observable