emberjs로 양식을 편집 할 때 유용한 정보

Question

사용자가 저장 버튼을 클릭하고 사용자가 작업을 취소 한 경우 이전 데이터를 검색하는 경우에만 양식을 편집하여 양식을 편집 할 때 좋은 해결책이 있습니까?

각 양식 필드로 데이터 바인딩 된 개체를 복제하고 저장할 때 복제 된 개체로 초기 개체를 설정하는 것과 같은 몇 가지 솔루션을 보았습니다.

엠버 데이터를 사용하지 않고도 답변을 드릴 수 있다면 좋을 것입니다.

Answer 1

나는 ember-data를 사용하지 않는 솔루션을 선호하지만 ember-data를 사용하는 것이 최상의 방법이라고 주장한다. 많은 사람들이이 질문을 접할 수 있다고 생각하기 때문에 다음은 ember-data를 사용하는 솔루션입니다 ...

다음과 같이 경로를 설정하면 정확하게 수행 할 수 있습니다.

App.CommentEditRoute = Em.Route.extend({ 

    model: function(params) { 
    return this.store.find('comment', params.comment_id); 
    }, 

    actions: { 
    willTransition: function(transition) { 
     var model = this.get('controller.content'); 

     if (model.get('isDirty')) { 
     model.rollback(); 
     } 
    } 
    }, 

}); 

(사용자가 저장 버튼을 클릭하기 때문에) 당신은 어댑터를 통해 변경 내용을 유지하고 isDirty은 false로 설정됩니다 컨트롤러에 this.get('content').save()을 호출하는 경우. 따라서 모델은 롤백되지 않습니다. 그렇지 않은 경우 컨트롤러에서 this.get('content').save()을 호출하지 않으면 isDirty 속성이 true이되고 저장하지 않은 변경 내용은 삭제됩니다. 자세한 내용은 DS.Model docs을 참조하십시오.

willTransition은 경로를 변경하려고 할 때 자동으로 호출되는 이벤트입니다. 직접 호출 할 필요가 없습니다.

컨트롤러는 다음과 같습니다

App.CommentEditController = Em.ObjectController.extend({ 

    save: function() { 
    var _this = this; 

    _this.get('content').save().then(function() { 
     // Success 
     _this.transitionToRoute('comments'); 
    }, function() { 
     // Failure 
     Em.assert('Uh oh!');  
    }); 
    }, 

    cancel: function() { 
    this.transitionToRoute('comments'); 
    }, 

}); 

을 또한, 다음과 같이보기에 제출 이벤트를 캡처 할 수 있도록 제출 적절한 HTML 버튼이나 입력을 사용하여 기본 HTML 양식 제출을 활용해야 :

App.CommentEditView = Em.View.extend({ 

    submit: function() { 
    this.get('controller').save(); 
    }, 

});