Question

点击语言列表，了解如何使用knockoutJS在另一个列表中显示各个国家/地区？

我写下我的json如下：

var LanguageLists = '{"LanguageLists":[' +
    '{ "LanguageList": [{ "LangListItem": "Afrikaans"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Albanian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Arabic"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Bengali"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Bosnian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Cantonese"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Chinese"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Danish"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Dutch"}]},' +
    '{ "LanguageList": [{ "LangListItem": "English"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Finnish"}]},' +
    '{ "LanguageList": [{ "LangListItem": "French"}]},' +
    '{ "LanguageList": [{ "LangListItem": "German"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Greek"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Hindi"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Irish"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Italian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Japanese"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Korean"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Lingala"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Malay"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Moldovan"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Nepali"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Northern Sotho"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Persian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Portuguese"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Romanian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Russian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Serbian"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Somali"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Spanish"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Tamil"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Tsonga"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Turkish"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Urdu"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Venda"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Xhosa"}]},' +
    '{ "LanguageList": [{ "LangListItem": "Zulu"}]}' +
    ']}';

var parsedLanguageListJson = ko.utils.parseJson(LanguageLists);

和HTML如下

<div class="flexColumnStyle01 containerStyle02">
    <ul data-bind="foreach: myLangListViewModel.LanguageLists">
        <li data-bind="foreach: $data.LanguageList"> <a data-bind="html:LangListItem, click: $parent.removePlace"></a>

        </li>
    </ul>
</div>
<div class="flexColumnStyle01 containerStyle03">
    <ul>
        <li> <a></a>

        </li>
    </ul>
</div>

现在有人可以帮助您填写“ containerStyle03 ”列表中的相应国家/地区吗？

Answer 1

以下是您的问题的解决方案。修改你的代码就像这样。

你需要一个像这样的数组

var LanguageLists = [ 
    { "LangListItem": "English","Country":"England","Code":"UK"},
    { "LangListItem": "English","Country":"Australia","Code":"AS"},
    { "LangListItem": "Frunch","Country":"France","Code":"FR"},
    { "LangListItem": "German","Country":"Ditch","Code":"GR"},
    { "LangListItem": "Arabic","Country":"Saudi Arabia","Code":"SA"},
    { "LangListItem": "Arabic","Country":"Dubai","Code":"DU"},
]

现在你的观点

<div class="flexColumnStyle01 containerStyle02">
    <ul data-bind="foreach: myLangListViewModel.LanguageLists">
         <li data-bind="foreach: $data.LanguageList"> 
              <a data-bind="html:LangListItem, click: $parent.showCountries"></a>
         </li>
     </ul>
 </div>

这是showCountries函数

self.showCountries = function(country){
     var countries = []
     ko.utils.arrayForEach(self.LanguageLists,function(item){
        if(item.Country == country){
                countries.push(item.Country)
        }
     })
     self.CountryList(countries)
}

CountryList是可观察的数组属性。

并查看

<div class="flexColumnStyle01 containerStyle03">
    <ul data-bind="foreach:CountryList">
        <li data-bind="text:$data"></li>
    </ul>
</div>

如何使用knockoutJS使用国家/地区列表填充语言

1 个答案: