파일 관리자를위한 JavaScript / 부분 논리

StackOverflow https://stackoverflow.com//questions/9695134

문제

기본적으로 WordPress의 '미디어'섹션이 기능하는 방식과 비슷한 내 레일 앱의 파일 관리자를 만들려고합니다. 현재 Asset라는 모델이 있으며 사용자가 다양한 이미지를 업로드 할 곳입니다. 다양한 다른 모델에서는 텍스트 필드 인 이미지 필드가 있습니다. 사용자가 텍스트 필드를 클릭하면 Asset가 표시된 모든 이미지가있는 모달 창에서 '자산 관리자'를 열 수 있기를 바랍니다. 사용자가 이미지 중 하나를 클릭하면 모달을 닫고 텍스트 필드를 선택한 이미지의 URL로 채워야합니다.

i Events라는 모델이있어 내가 말하는 텍스트 필드가 들어있는 텍스트 필드를 포함합니다. new 조치에서는 JS에 응답합니다. 이는 IT가 기대하는 것처럼 모달 창에있는 모든 자산을 포함하는 부분을로드합니다. 내 유일한 문제는 내가 exteracodiceTag 코드 호출을 통해이 작업을 수행하는 것입니다. 추가 JavaScript를 호출하여 이미지 URL을 텍스트 필드에 다시로드 할 수 없으므로 오브젝트가 아직 존재하지 않기 때문입니다. 어쨌든, 코드로 :

컨트롤러 

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end
.

new.js 

$('.acontainer').html('<%= render @asset %>');
.

page.js 

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});
.

아이디어는 더 많은 방법을 알고있는 더 좋은 방법을 알고있는 아이디어가 많이 감사 할 것입니다. : -)

도움이 되었습니까?

해결책

는 .Image-Field를 클릭 할 때

를 클릭 할 때 검색 할 때 마찰 이벤트를 .Acontainer IMG DOM 엘리먼트에 바인딩 할 수 있습니다.

일반적으로 jquery.on 를 사용해야합니다 이벤트를 문서 루트에 바인딩해야합니다. 이것은 위임이라고합니다. 링크를 클릭하면 이벤트가 기포되고 문서 노드를 누르고 이벤트를 처리합니다. 이렇게하면 Ajax를 통해 DOM 요소를 추가하거나 DOM에 직접 추가하면 사용자가 의도 한 이벤트 처리기를 계속 사용할 수 있습니다. 

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});
.

그러나 여기에 더 큰 문제가 있습니다. 페이지에 여러 개의 .Image 필드 요소가있는 것처럼 들립니다. .Image-Field 핸들러에서해야 할 일은 JS가 아닌 HTML을 반환하므로 새로 추가 된 HTML의 루트 요소에 이벤트를 바인딩 할 수 있습니다. 해당 블록은 이미지를 클릭하면 설정할 수있는 값이있는 특정 입력 필드를 식별합니다. 

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});
.

최종 메모를 사용하면 자산에 대해 RESTful 컨트롤러를 사용하는 것이 좋습니다. 특히 편집 작업을 사용하여 EventsController라는 컨트롤러에서 하나의 리소스 (자산)를 가져 오지 않을 수 있습니다. AssetScontroller :: 색인을 가져 오려면 자산 목록을 반환합니다.

다른 팁

".acontainer img"의 초기 쿼리가 요소를 반환하지 않으므로 이미지를 클릭하면 아무 것도 발생하지 않으므로 이벤트 핸들러가 아무 것도 첨부되지 않았기 때문입니다.그들은 아직로드되지 않았습니다.

jQuery의 live 메소드 를 시도 할 수 있습니다.핸들러가 페이지로드 및 요소에 나중에 돔에 추가 된 요소에 첨부합니다.

update : @aceofspades가 지적한 live는 jQuery 1.7에서 사용되지 않습니다. relincheicetagcode

를 사용하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top