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

单击语言列表如何使用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>

---

现在，有谁能帮助您在“集装箱样式03”列表中填充相应的国家吗？

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

你需要一个类似这样的数组

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>

其中

CountryList

是可观察的数组属性

和视图

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

为什么要用JavaScript编写JSON文本？那完全没有必要。只需使用一个常规对象。请在JSFIDLE中发布示例代码。嗨，Raheel，即使在我的代码中也有填充语言列表。但是我希望在单击每种语言时，需要在另一个面板中显示相应的国家/地区列表。你明白我的问题吗？恐怕我不明白你的意思。你能详细解释一下吗？好的，我想要界面，比如左边我需要语言列表（比如英语、西班牙语等），右边是一个空的列表面板。当用户点击左侧任何一种语言时，右侧面板上的相应国家（如英语-然后是美国、英国、澳大利亚等国家）列表需要填充/显示。。。怎么做？好的。但请告诉我，我们将如何告诉我们的模型英国、澳大利亚和其他国家与英语有关。你没有任何东西来建立关系。这就是我需要的，v需要为它创建单独的数组吗？或者告诉我实现这一目标的最佳方法？

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