동적으로 생성 된 요소가 Raphael 캔버스에 사용되었습니다.

응용 프로그램에서 "페이지"로 사용할 HTML 템플릿을 동적으로로드하는 Backbone.js/Require.js 응용 프로그램을 만들었습니다. 이것은 내 메인 HTML 페이지가 그렇게 보임을 의미합니다.동적으로 생성 된 요소가 Raphael 캔버스에 사용되었습니다.

<head> 
    // Necessary CSS and Javascripts here 
</head> 
<body> 
    <div id="container"></div> 
</body>

그런 다음 밑줄 템플릿을 사용하여 새 요소를 DOM에 동적으로 렌더링했습니다. 그러나 새로운 기능을 사용하려면 Raphael.js 차트가 필요합니다. 새 요소 <div id='canvas'></div>을 작성하고 Raphael('canvas')을 호출합니다. 그러나 캔버스 요소가 DOM 준비에 없었기 때문에 Raphael은 새로 작성된 요소를 볼 수 없습니다.

id 참조 대신에 Raphael($('#canvas'))과 같은 jQuery 선택기를 사용하려고 시도했지만 캔버스를 본문 요소가 아니라 컨테이너 요소에 연결합니다.

동적으로 생성 된 요소에 Raphael 캔버스를 바인딩하는 방법에 대한 제안 사항이 있습니까?

출처

2012-05-28 srquinn

이 문제를 극복하는 방법은보기에 빈 요소를 만들고 그 위에 모든 것을 바인딩하는 것입니다. 나는 라파엘 함께 일한 적이 없다,하지만 난이 일 수 있다고 생각 :

var someView = Backbone.View.extend({ 
    el: document.createElement('div'), // This creates a DOM element '<div></div>' 

    initialize: function(){ 
     Raphael(this.el); // Attach Raphael, you could also go with jQuery 
    }, 

    render: function(){ 
     jQuery('#container').append(this.el); // Add to DOM somehow 
    } 
})

출처

2012-05-28 23:58:54 Mosselman

나는 오늘 아침에 일어 났는데, "이런!" 그리고 당신의 대답이 정말로 옳았다는 것을 깨달았습니다. 백본보기의 기본 원리 중 하나는 메모리에서 작성한 다음 DOM에 추가 할 수 있다는 것입니다. 두뇌 충격에 감사드립니다! – srquinn

제 편집이 올바른 방법이었습니다 ... 나는 당신에게 대리인을주고 싶었습니다 ... 제 편집을 받아 들여 다른 사람들이 정확하게 수행 할 수 있도록하거나 제 질문에 직접 대답을하겠습니다. – srquinn

@jibsales 편집이 거부되었습니다. 다른 답변은 내 답변의 의미를 대부분 바꿔 놓았습니다. 내 답변이 더 일반적으로 적용 가능하다고 생각합니다. 귀하의 답변은 귀하의 상황에보다 구체적입니다. 그래도 신용을 줘서 고마워. 정말 고마워. 당신은 물론 당신이 그것을 기꺼이하고 대답 할 수있는 자유가 있습니다. :). 다행스럽게도 나는 두뇌가 뛰고 다시 뛰는 것을 도울 수 있었고, 우리 모두 거기에 있었고 우리 모두 계속 거기에갔습니다. – Mosselman

좋은 접근법은 템플릿이 DOM에 추가 된 후 이벤트를 발생시키고 Raphael ('canvas')에 대한 호출을 통해 해당 이벤트를 수신하거나 콜백을 사용하여 Raphael ('canvas'). 두 경우 모두 대상 요소가 배치되기 전에 Raphael ('canvas')을 호출하지 않도록해야합니다.

매우 대략 이런 식으로 뭔가 :

//from your raphael module/code 
$(document).on('canvasAdded', function(){ 
    var paper = Raphael('canvas'); 
    //stuff! 
}); 

//after you are sure your template has rendered 
$(document).trigger('canvasAdded');

당신은 아마 .init() 메소드의 어떤 종류를 확인하고 전화를 원하는이 점 (내가 위에서 보여 어떤 대) 이벤트 핸들러에서 그러나 희망 너는 올바른 방향으로.

출처

2012-05-28 23:08:15 busticated

주사위가 없습니다. 내가 템플릿을 DOM에 추가 한 직후에 console.log (document)를 호출하면 요소를 볼 수 있으며 추가 된 'canvas'요소를 찾기 위해 Firebug에서 결과 트리를 탐색 할 수 있지만 document.getElementById (' 캔버스 ') 나는 null. – srquinn

firebug 또는 chrome의 js 콘솔을 통해 init raphael을 사용할 수 있습니까? (yr 앱을로드하고 기대하는 상태로 가져 와서 Raphael ('canvas')를 입력하십시오.) – busticated

nope ... 요소에 대해 정의되지 않은 값을 반환합니다 ... 가능하지 않다고 생각하기 시작했습니다. Backbone/Require를 사용하지 않고 여러 이벤트 위임 메서드를 샌드 박스 처리 했으므로 같은 결과가 나타납니다. – srquinn

Raphael($('#canvas').first(), '100%', '100%')

비록 내가했다 라파엘이 발생하지 발생하는 주요 문제는 jQuery를 선택기의 배열을 전달 잊고 있었다, 다른 오류 요소와 Raphael의 생성자는 하나의 요소입니다. Raphael은 셀렉터 결과의 최상위 상위이기 때문에 본문에 첨부하고있었습니다.

Mosselman은 백본에서 뷰를 완전히 메모리에 작성한 다음 DOM에 추가 할 수 있다는 점을 지적하는 데 있어서도 정확했습니다.

출처

2012-05-29 18:26:20 srquinn

나는 이것이 너무 오래된 질문이지만, 어쨌든 누군가에게 도움이 될 수 있음을 알고 있습니다. 보기가 페이지에 배치되도록하는 것이 중요하므로 onShow 기능과 같은 것을 사용하거나 렌더링하십시오. 그러나 Raphael이 제대로 표시되지 않을 것입니다. 왜냐하면 Raphael에게 $ this 또는 $ el 또는 비슷한 것을 보내면 예상대로 받아 들일 수 없기 때문입니다. 당신이해야 할 일은 다음과 같습니다. $ el.first() 또는 this. $ el [0].

출처

2013-09-19 14:46:07 zmilan

동적으로 생성 된 요소가 Raphael 캔버스에 사용되었습니다.

답변

관련 문제