Question

我第一次玩Backbone.js，我遇到了一些麻烦。我最初的目的是显示某个幻灯片的内容，但我已经回归到'只是试图用.text（）方法显示任何内容。

我调用了render方法，我可以在日志中看到，但是'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>

到目前为止，这是我的Backbone代码：

(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（）就好了，第一个没有。

Answer 1

渲染后，您需要对返回对象执行某些操作。在这种情况下，它是幻灯片视图。

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

您的视图的渲染函数返回自身，因此定位内置el属性

Answer 2

在您的情况下，元素#slideshow已经存在于您的HTML中，因此您无需将其附加到@ czarchaic的答案中指定的正文中。

您遇到问题是因为您尝试在DOM中存在之前呈现并设置#slideshow的值。这是因为您在创建DOM元素之前已包含js/slides.js。包含并执行了JS，但是当调用slideshow.render()时，尚未创建#slideshow元素，因此$('#slideshow')将不返回任何元素，因此text()无效

你需要......

在创建DOM元素之后将JavaScript include移动到

<!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);

.render函数正在运行但没有设置任何东西

2 个答案: