단추를 클릭 할 때 테이블에 동적 행을 추가하고 Ember를 사용하여 클릭 할 때 기존 행을 편집 가능하게 만드는 방법

Question

클릭 할 때 테이블 행을 편집하려면 해당 행을 텍스트 상자로 만들고 싶습니다. 그래서 나는 편집하고 저장할 수 있습니다.

또한 추가 버튼을 클릭하면 동적으로 행을 추가하는 방법입니다. 나는 jQuery를 사용하는 방법을 알고 있지만, ember에는 전혀 모른다.

감사합니다.

Ember에서 이러한 종류의 동작을 에뮬레이션하고 싶습니다.

http://jsbin.com/codeso/1/edit?html,js,output이 jsbin에는 테이블과 버튼이 있습니다. 버튼을 클릭하면 동적 행이 테이블에 열이있는 테이블에 추가되어 사용자가 데이터를 입력 할 수 있습니다.이 버튼을 누르면 다른 버튼을 저장할 수 있습니다.

Answer 1

테이블이 ArrayController 모델에 바인딩되어 있다고 가정합니다. 지금은이 같은 일을하고 있어요

<button {{action "addElement"}}>Add row</button> 

Answer 2

컨트롤러에서

<table> 
... 
{{#each element in model}} 
    <tr> 
     <td>{{element.name}}</td> 
     ... 
    </tr> 
{{/each}} 
... 

은 핸들 바 템플릿에 그런 행동

// inside controller 
actions: { 
    addElement: function() { 
     var elements = this.get('model'), // model contains the data/list for the rows 
      newElement = /* here your object creation code */; 

     elements.pushObject(newElement); 
    } 

} 

를 추가합니다. 내 생각은 {#each} 블록 앞에 입력이있는 행을 만들고 사용자가 행을 추가하도록 선택하면 해당 블록을 표시하는 것입니다. 이 행은 취소 (단순히 행을 보이지 않게 함)하고 버튼을 저장합니다. 사용자가 저장하는 경우에만 splattne의 addElement()이 호출됩니다.

이 방법을 사용하면 행 및 양식 마크 업을 동적으로 추가 할 필요가 없습니다. 실제로 HTML/자바 스크립트 일 뿐이지 만 Ember 작업은 실제로 데이터를 백엔드에 추가해야 할 때만 사용할 수 있습니다.