Select 下拉列表中的复杂对象并获取附加数据
Select a complex object in a drop down list and get additional data
我使用 jsViews 构建应用程序。
在某个地方,我有一组复杂的对象。该数组绑定在一个下拉列表中,我可以在其中将标签和值设置为我的对象的属性。
但是,我还必须获取自定义对象的一些其他属性。
我该怎么做?
现在我有:
(function($) {
var dataVm = {
value: null,
choices: [
{ "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
{ "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
{ "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
{ "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
],
icon: "flag-icon-fr"
};
var helpers = {
doSelect : function(){
// Fake business rule, I.E. call a web service to get country data
var valueFromBusinessLogic = "FR";
$.observable(dataVm).setProperty("value", valueFromBusinessLogic);
}
};
$.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
<p>Selected : <span>{^{:value}}</span></p>
<p>Flag : <span data-link="class{:('flag-icon ' + icon)}"></span></p>
<select data-link='value'>
{^{for choices}}
<option value="{{:value}}">{{:label}}</option>
{{/for}}
</select>
<button data-link="{on ~doSelect}">Select from business logic</button>
</script>
<div id="container">
</div>
这按预期工作,但我无法获得 icon
子 属性。
我的 value
属性 很重要,可以通过外部操作(表单初始化或按钮单击)进行设置。所以我不能(至少我相信),我不能玩 #index
因为它会将索引放入值 属性.
您需要确定您的 selected 国家 属性 是什么 - 它可以是对象、选择数组中的索引或值字符串。但是 select 的默认绑定是值。
如果您将值字符串保留为 selected country,那么您可以为 return 对象定义一个查找助手:
function countryFromVal(val) {
var i = dataVm.choices.length;
while (i--) {
if (dataVm.choices[i].value === val) {
return dataVm.choices[i];
}
}
return dataVm.choices[0];
}
var helpers = {
countryFromVal: countryFromVal,
然后写
<span data-link="class{:('flag-icon ' + ~countryFromVal(value).icon)}"></span>
或者,您可以将 selected 国家 属性 作为索引,并在 select 上使用转换器,如本例所示:http://www.jsviews.com/#link-select@selectconvert.
或者你可以让它成为对象本身,再次使用转换器,像这样:
(function($) {
var dataVm = {
choices: [
{ "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
{ "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
{ "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
{ "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
]
};
dataVm.country = dataVm.choices[1];
function countryFromVal(val) {
var i = dataVm.choices.length;
while (i--) {
if (dataVm.choices[i].value === val) {
return dataVm.choices[i];
}
}
return dataVm.choices[0];
}
function valFromCountry(country) {
return country.value;
}
$.views.converters({
fromValue: countryFromVal,
toValue: valFromCountry
});
var helpers = {
doSelect : function(){
// Fake business rule, I.E. call a web service to get country data
var valueFromBusinessLogic = "FR";
$.observable(dataVm).setProperty("country", countryFromVal(valueFromBusinessLogic));
}
};
$.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
<p>Selected : <span>{^{:country^value}}</span></p>
<p>Flag : <span data-link="class{:'flag-icon ' + country^icon}"></span></p>
<select data-link='{toValue:country:fromValue}'>
{^{for choices}}
<option value="{{:value}}">{{:label}}</option>
{{/for}}
</select>
<button data-link="{on ~doSelect}">Select from business logic</button>
</script>
<div id="container"></div>
注意语法 country^icon
- 参见 http://www.jsviews.com/#linked-paths@deep
我使用 jsViews 构建应用程序。
在某个地方,我有一组复杂的对象。该数组绑定在一个下拉列表中,我可以在其中将标签和值设置为我的对象的属性。
但是,我还必须获取自定义对象的一些其他属性。
我该怎么做?
现在我有:
(function($) {
var dataVm = {
value: null,
choices: [
{ "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
{ "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
{ "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
{ "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
],
icon: "flag-icon-fr"
};
var helpers = {
doSelect : function(){
// Fake business rule, I.E. call a web service to get country data
var valueFromBusinessLogic = "FR";
$.observable(dataVm).setProperty("value", valueFromBusinessLogic);
}
};
$.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
<p>Selected : <span>{^{:value}}</span></p>
<p>Flag : <span data-link="class{:('flag-icon ' + icon)}"></span></p>
<select data-link='value'>
{^{for choices}}
<option value="{{:value}}">{{:label}}</option>
{{/for}}
</select>
<button data-link="{on ~doSelect}">Select from business logic</button>
</script>
<div id="container">
</div>
这按预期工作,但我无法获得 icon
子 属性。
我的 value
属性 很重要,可以通过外部操作(表单初始化或按钮单击)进行设置。所以我不能(至少我相信),我不能玩 #index
因为它会将索引放入值 属性.
您需要确定您的 selected 国家 属性 是什么 - 它可以是对象、选择数组中的索引或值字符串。但是 select 的默认绑定是值。
如果您将值字符串保留为 selected country,那么您可以为 return 对象定义一个查找助手:
function countryFromVal(val) {
var i = dataVm.choices.length;
while (i--) {
if (dataVm.choices[i].value === val) {
return dataVm.choices[i];
}
}
return dataVm.choices[0];
}
var helpers = {
countryFromVal: countryFromVal,
然后写
<span data-link="class{:('flag-icon ' + ~countryFromVal(value).icon)}"></span>
或者,您可以将 selected 国家 属性 作为索引,并在 select 上使用转换器,如本例所示:http://www.jsviews.com/#link-select@selectconvert.
或者你可以让它成为对象本身,再次使用转换器,像这样:
(function($) {
var dataVm = {
choices: [
{ "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
{ "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
{ "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
{ "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
]
};
dataVm.country = dataVm.choices[1];
function countryFromVal(val) {
var i = dataVm.choices.length;
while (i--) {
if (dataVm.choices[i].value === val) {
return dataVm.choices[i];
}
}
return dataVm.choices[0];
}
function valFromCountry(country) {
return country.value;
}
$.views.converters({
fromValue: countryFromVal,
toValue: valFromCountry
});
var helpers = {
doSelect : function(){
// Fake business rule, I.E. call a web service to get country data
var valueFromBusinessLogic = "FR";
$.observable(dataVm).setProperty("country", countryFromVal(valueFromBusinessLogic));
}
};
$.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="mainTemplate" type="text/x-jsrender">
<p>Selected : <span>{^{:country^value}}</span></p>
<p>Flag : <span data-link="class{:'flag-icon ' + country^icon}"></span></p>
<select data-link='{toValue:country:fromValue}'>
{^{for choices}}
<option value="{{:value}}">{{:label}}</option>
{{/for}}
</select>
<button data-link="{on ~doSelect}">Select from business logic</button>
</script>
<div id="container"></div>
注意语法 country^icon
- 参见 http://www.jsviews.com/#linked-paths@deep