. 렌더링 기능이 실행 중이지만 아무 것도 설정하지 않았습니다.

처음으로 Backbone.js를 사용하고 있는데 약간 문제가 있습니다. 내 의도는 특정 슬라이드의 내용을 표시하는 것이었지만, .text() 메서드를 사용하여 '무엇이든 표시하려고했습니다'로 바뀌 었습니다.. 렌더링 기능이 실행 중이지만 아무 것도 설정하지 않았습니다.

내 렌더링 메서드 get이 호출되었지만 로그에서 볼 수 있지만 'currentslide'ID는 채워지지 않았습니다. 아무도 내가 여기서 바라보고있는 바보 같은 것을 아는가?

백본 코드가 정상적으로 처리되는 것처럼 보일 경우 jQuery 관련 문제 일 수 있습니다. 나는 두 사람 모두에게 아주 새로운 사람입니다. 사전에

많은 감사,

디터

이 내 HTML입니다 :

<!doctype html> 
<head> 
<meta charset="utf-8"> 

<title>Presentation</title> 

<script src="js/vendor/jquery-1.5.1.min.js"></script> 
<script src="js/vendor/underscore.js"></script> 
<script src="js/vendor/backbone.js"></script> 
<script src="js/slides.js"></script> 
</head> 

<body> 
    <div id="container"> 
    <div id="slideshow"> 
     <h2 id="currentslide"></h2> 
</div> 
    </div> 
</body>

그리고 이것은 지금까지 내 백본 코드 :

(function($) { 

window.Slide = Backbone.Model.extend({ 
    content: "Testcontent", 
    initialize: function() { 
     console.log('Slide created'); 
    } 
}); 

window.Slidedeck = Backbone.Collection.extend({ 
    model: Slide, 
}); 

window.Slideshow = Backbone.View.extend({ 
    el: $('#slideshow'), 
    currentSlide: 0, 

    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 
    render: function(){ 
     console.log('Rendering'); 

     $('#currentslide').text('This aint even working darned.'); 
     return this; 
    } 

}); 

var slidedeck = new Slidedeck([ 
    new Slide({ 
     content: "Slide 1", 
    }), 
    new Slide({ 
     content: "Slide 2", 
    }), 
]); 

var slideshow = new Slideshow({ 
    collection: slidedeck, 
}); 

slideshow.render(); 

})(jQuery);

편집 : 나는

$(slideshow.render().el).appendTo('body');

와 코드의 마지막 라인을 대체하는 제안을 시도하지만, 불행하게도 작동하지 않습니다.

이상한 점은 .text()가 완벽하게 작동하는 render() 코드가 있다는 것입니다.

render: function(){ 
$('#actionValue').text(this.model.get('value')); 
return this; 
}

render() 코드가 두 코드에서 실행되기 때문에 아무 것도 바인딩하지 않는다고 가정합니다. 하지만 어떤 이유로 후자는 .text()를 잘 수행하지만 처음에는 그렇지 않습니다.

출처

2012-01-28 Dieter

을 대상으로 반환 규정이 몸에 추가 할 필요가 없습니다, 요소 #slideshow은 이미 당신의 HTML에 존재 @ czarchaic의 대답.

DOM에 존재하기 전에 #slideshow의 값을 렌더링하고 설정하려고하여 문제가 발생했습니다. 이는 DOM 요소를 만들기 전에 js/slides.js을 포함했기 때문에 발생합니다. JS가 포함되고 실행되지만 slideshow.render()이 호출되면 #slideshow 요소가 아직 생성되지 않았으므로 $('#slideshow')은 요소를 반환하지 않으므로 text()은 아무 작업도 수행하지 않습니다.

다음 중 하나가 필요합니다.자바 스크립트를 이동

는 DOM 요소를 생성

<!doctype html> 
<head> 
<meta charset="utf-8"> 

<title>Presentation</title> 

<script src="js/vendor/jquery-1.5.1.min.js"></script> 
<script src="js/vendor/underscore.js"></script> 
<script src="js/vendor/backbone.js"></script> 
// Remove the include from here 
</head> 

<body> 
    <div id="container"> 
    <div id="slideshow"> 
     <h2 id="currentslide"></h2> 
    </div> 
    </div> 
</body> 

// Put it here 
<script src="js/slides.js"></script>

이후에 포함 또는 문서 준비 블록에 대한

(function($) { 

window.Slide = Backbone.Model.extend({ ... }); 

window.Slidedeck = Backbone.Collection.extend({ ... }); 

window.Slideshow = Backbone.View.extend({ ... }); 

var slidedeck = new Slidedeck([ ... ]); 

var slideshow = new Slideshow({ ... }); 

// Don't render until the elements exist 
$(slideshow.render); 

})(jQuery);

출처

2012-01-29 17:12:38

kpeel, 당신은 절대 생명의 은인입니다. 나는 작은 코드 조각을 보면서 몇 시간을 보내고, 내 머리카락을 꺼냈다 :-) 그림은 '문서 준비'문제였다. 감사합니다. – Dieter

일단 렌더링하면 반환 객체로 무언가를해야합니다. 이 경우 슬라이드 쇼입니다.

$(slideshow.render().el).appendTo('body');

귀하 뷰의 렌더링 기능 자체가 너무 귀하의 경우에는 내장 el 재산

출처

2012-01-28 23:36:49 czarchaic

감사를 당신의 render 전화를 포장 할 필요가 대답,하지만 아무것도 변경하지 않는 것. 이상하게 작동하는 코드 조각에 대한 추가 정보로 질문을 편집했습니다. – Dieter

. 렌더링 기능이 실행 중이지만 아무 것도 설정하지 않았습니다.

답변

관련 문제