knockoutJS를 사용하여 국가 목록으로 언어를 채우는 방법

Question

knockoutJS를 사용하여 각 국가를 다른 목록에 표시하는 방법에 대한 언어 목록을 Onclick 하시겠습니까?

나는 아래처럼 내 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); 

및

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

아래

같은 HTML 지금 누군가는 " containerStyle03"의 목록에서 국가를 채우는 방법을 도와 드릴까요?

Answer 1

다음은 문제의 해결책입니다. 이런 식으로 코드를 수정하십시오.

당신은 CountryList이 관찰 배열 속성 인 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) 
} 

에게 배열이

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> 

그리고이하는 것입니다 필요 .

그리고보기

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