82일: #100DaysofCode - 도움을 받고 문제가 해결됨
80일차 - #100DaysofCode - 레일 문제에 갇혀 있음
브리트니 ・ 2020년 8월 20일 ・ 2분 읽기
#100daysofcode
#help
#rails
#ruby
나를 도와준 사람은 익명을 유지하도록 요청했고 Unsplash gem을 반복하고 Ruby 대신 Javascript를 사용하여 표시하는 방법을 보여주면서 시간을 보냈습니다.
먼저 Unsplash gem의 응답을 사진 컨트롤러의 변수에 저장했습니다.
@photos = Unsplash::Photo.search("cats")
그런 다음 보기 내에서 응답을 반복하여 필요한 것을 얻었습니다. (리팩토링할 때 뷰의 모든 논리를 도우미로 옮길 계획입니다.)
또한 javascript/jquery에서 eventListener로 참조할 수 있도록 체크박스에
class
를, 제출 버튼에 id
를 추가했습니다. <% @photos.each do |p| %>
<img src="<%= p["urls"].full %>" alt="random" ><br>
<div><p> <%= p["alt_description"] %> </p></div><br>
<%= check_box_tag "data", 1, false, data: {url: p["urls"].full, description: p["alt_description"]}, class: "add-photo" %>
<% end %>
<button id="submit"> Submit </button>
application.js
내에서 로드 시 실행되는 초기 함수를 추가했습니다. add-photo
클래스에 click eventListener를 추가하고 URL과 설명을 배열에 저장했습니다.$(document).on("turbolinks:load", function() {
const photos = []
$( ".add-photo" ).click(function(e) {
const photo = {url: e.target.dataset.url, quote: e.target.dataset.description }
photos.push(photo)
});
그런 다음 사진 개체를 해시에 저장하고
/photos
에 게시 요청을 가져오는 제출 버튼에 click eventListener를 추가했습니다. $("#submit").click(function(e){
fetch('/photos', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({data: photos}),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
})
})
내 사진 컨트롤러 내의 생성 방법에 byebug를 넣었고 IT가 작동했습니다. 프로젝트를 진행하는 데 필요한 모든 정보가 있었습니다.
그들의 도움에 너무 감사하고 그들의 도움이 없었다면 제 프로젝트를 단시간에 진행할 수 없었을 것임을 압니다.
진심으로 Brittany / 사진 앱
새로운 것을 배웠다는 사실이 기쁘고 다음 주에 자바스크립트로 넘어가면서 부트캠프를 통해 계속 배울 수 있어서 신이 났습니다.
나는 이번 주말에 이 프로젝트를 일요일까지 끝낼 수 있다는 큰 희망을 가지고 계속할 것입니다.
언제나처럼 읽어주셔서 감사합니다!
진정으로,
브르타뉴
오늘의 노래:
Reference
이 문제에 관하여(82일: #100DaysofCode - 도움을 받고 문제가 해결됨), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sincerelybrittany/day-82-100daysofcode-558h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)