컨트롤러 데이터를 구성 요소로 전달하고 ember js에서 백업하는 방법

Question

사용자 모델을 가져 오는 사용자 경로가있는 Ember 2.13 앱이 있습니다. 그래서 사용자 템플릿에서 가져온 모든 사용자를 표시하고 있습니다. 또한 사용자가 클릭 할 때 편집 양식에 데이터를 제공하는 사용자 컨트롤러가 있습니다. 나는 이것을하기 위해 사용자 컨트롤러를 사용하고있다.

모든 코드는 단일 템플릿이지만 렌더링 사용자 목록을 입력하고 사용자 양식을 두 개의 개별 구성 요소로 편집하고 싶습니다. render-single-user 및 edit-user 템플릿을 만든다고 가정 해 보겠습니다. 따라서 사용자가 render-single-user 구성 요소를 사용하여 렌더링 할 때 사용자를 클릭하면이 사용자의 데이터가 edit-user 구성 요소가 렌더링 한 dom에 표시됩니다.

문제는 구성 요소가 경로 모델이나 앱 스토어에 액세스 할 수 없다는 것입니다.

컨트롤러에서 구성 요소로 모델을 저장하고 렌더 단일 사용자 및 편집 사용자 구성 요소간에 전달하는 방법을 누군가에게 알려 주시면 감사하게 생각합니다. 사용자가 업데이트/저장을 클릭하면 수정 된 데이터가 컨트롤러까지 올라가서 레코드를 저장소에 저장해야하므로 결과적으로 서버에 대한 요청이 이루어집니다.

스크린 샷이 첨부되었습니다.

사용자보기

클릭했습니다 사용자

Answer 1

이 답변은 2.15로 작성되었습니다 2.x.x 및 버전에 적용됩니다.

Ember에서 시작하기 시작한 것 같습니다. 환영! Tutorial을 읽고 The Guides을 읽어 주시기 바랍니다. 그들은 투자입니다. 일이 훨씬 빨라지고 나중에 더 쉽게 될 것입니다. 내가 말하려고하는 모든 것은 거기에서 얻을 수있다. 그들은 건너 뛸 수 없습니다. 사용자 경로에서

:

model() { 
    return this.store.findAll('users') 
} 

사용자 컨트롤러에서 :

데이터 및 행동 요소까지 컨트롤러 및 경로에서 전달되는

actions: { 
    consoleLogger(thingToLog) { 
    console.log(thingToLog) 
    } 
} 

. 이것은 핸들 바 템플릿을 통해 수행됩니다.

구성 요소에 액션, 모델 및 변수를 전달

일반적인 예 : 구성 요소에서 다음

{{some-component 
    someControllerVariable=someControllerVariable 
    mode=model 
    consoleLogger=(action "consoleLogger")}} 

, 당신은이 같은 작업을 사용할 수 있습니다 :

<button {{action consoleLogger "string to log"}}>Log it</button> 

을 또는에서 사용 귀하의 구성 요소는 다음과 같습니다.

this.get('consoleLogger')("string to log"); 
// this.get retrieves the function and then we call it with an argument, kind of like how you'd do someOtherFunction() in plain js 

도우미 목록을 표시해야하므로 경로에 each helper를 사용해야합니다 :

액션이 구성 요소에 사용되는

{{#each users as |user|}} 
     {{user-list-item 
     someControllerVariable=someControllerVariable 
     user=user 
     consoleLogger=(action "consoleLogger")}} 
{{/each}} 

, 당신은 인수로 기록을 전달할 수 있습니다. 그들은 컨트롤러 액션으로 갈 것이고 그것은 save()와 같은 POST/PATCH/DELETE 타입의 연산을해야 할 곳입니다.

행운을 빕니다 :) 프롬프트 아직 긴 답장을