2010-05-26 5 views
3

저는 리프트에 초보자입니다. 리프트에는 바인드, Ajax 사용에 관한 질문이 있습니다.리프트 프레임 워크의 동적 바인드

Ajax를 동적으로 사용하여 3 개의 드롭 다운 메뉴를 만들고 싶습니다. 나는 달성하고자하는 것을 기술하기 위해 "주소"를 예제로 사용합니다. 주먹으로, 나는 "국가"메뉴를 "없음"으로 설정된 기본값으로 표시해야합니다. 이 시점에서 사용자는 원하는 경우 주소를 제출하도록 선택할 수 있습니다. 그렇지 않은 경우 정확한 주소를 제공 할 수 있습니다. 그녀가 국가를 선택하면 "주"메뉴가 표시되고 "주"를 선택하면 "카운티"메뉴가 표시됩니다.

리프트 데모 예제 덕분에 다음과 같이 정적 메뉴를 만들려고했습니다. 내 .html 파일에 세 조각 <select:country/>, <select:state/>, <select:county/>를 작성 스칼라 코드에서, 나는 다음과 같이 바인딩 :

bind("select", xhtml, 
    "system" -> select(Address.countries.map(s => (s,s)), 
         Full(country), s => country = s, "onchange" -> ajaxCall(JE.JsRaw("this.value"),s => After(200, replaceCounty(s))).toJsCmd), 
    "state" -> stateChoice(country) % ("id" -> "state_select"), 
    "county" -> countyChoice(state) % ("id" -> "county_select"), 
    "submit" -> submit(?("Go!"),()=>Log.info("Country: "+country+" State: "+state + " County: "+ county) 

대응 replaceCounty은 stateChoice, countyChoice이 내 모든 클래스에 정의되어 있습니다. 그러나 국가가 선택되면 Ajax 호출을 통해 상태가 새로 고쳐지며 카운티는 새로 고쳐지지 않습니다.

Q1) 국가 메뉴에 따라 두 메뉴를 새로 고치는 방법이 있습니까?

Q2) 앞서 설명한대로 동적으로 메뉴를 만드는 방법은 무엇입니까?

답변

1

첫 번째 선택에는 SHtml.ajaxSelect을 사용하고 다른 두 개에는 정적 요소를 사용하십시오. 첫 번째 선택이 변경되면 자바 스크립트를 반환하여 다음 선택을 다른 SHtml.ajaxSelect 호출의 결과로 채 웁니다. 아마 당신은 선택되어 어떤 값을 저장할 수 있습니다 #ajaxSelect에 대한 콜백에서

def countrySelect : NodeSeq = { 
    val countryOptions = List(("",""),("AR","AR")) 
    SHtml.ajaxSelect(countryOptions, Empty, { selectedCountry => 

    val stateOptions = buildStateOptions(selectedCountry) 
    SetHtml("state-select", SHtml.ajaxSelect(stateOptions, Empty, { selectedState => 
     // setup the county options here. 
    })) 

    }) 
} 

bind(namespace, in, 
    "country" -> countrySelect, 
    "state" -> <select id="state-select"/>, 
    "county" -> <select id="county-select"/>) 

하지만이 내가 걸릴 것 일반적인 방법입니다.

http://demo.liftweb.net/ajax-form

당신이 AJAX 업데이트의 결과로 여러 드롭 다운을 업데이트하려면, 당신은 같은 것을 반환 할 수 있습니다 :

3

에서 바로이 가능합니까 훌륭한 예제 코드가있다 :

ReplaceOptions(...) & ReplaceOptions(...) 
관련 문제