.render函數正在運行，但沒有設置任何東西

我第一次玩Backbone.js，並且遇到了一些麻煩。我最初的意圖是顯示某張幻燈片的內容，但我已經回到'只是試圖用.text（）方法顯示任何內容「。.render函數正在運行，但沒有設置任何東西

我的渲染方法get的調用，我可以看到在日誌中，但'currentslide'id沒有填充。有人知道我在這裏忽略了什麼愚蠢的東西嗎？

看到Backbone代碼似乎沒問題，它可能是一個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');

更換的代碼的最後一行但是這似乎並不很遺憾工作。

奇怪的是，我有另一塊代碼與render（），其中.text（）完美的作品。

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()沒有任何操作。

您需要......

將你的JavaScript包含對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>

之後或者你需要用你的render呼叫並在文件準備塊

(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 2012-01-29 19:16:52

一旦你渲染你需要做的東西與返回對象。在這種情況下，它是幻燈片放映視圖。

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

您的視圖的渲染函數返回本身，以便針對內置el財產

來源

2012-01-28 23:36:49 czarchaic

感謝答案，但它似乎並沒有改變任何事情。我編寫了一個額外的信息片段的問題，奇怪的工作，一段代碼。 – Dieter 2012-01-29 13:00:13

.render函數正在運行，但沒有設置任何東西

回答

相關問題