主干 + 下划线:找不到模板变量.+ 如何正确访问模型属性

Backbone + Underscore: Can't find Template Variable. + Howto correctly access Modelattributes?

本文关键字：何正确 访问 模型 属性 变量 下划线 找不到 主干      更新时间：2023-09-26

我刚开始使用Backbone，我的目标是一个简单的幻灯片放映应用程序。我有一个 REST 接口，其中

/slidecasts

给我一个所有可用演示文稿的列表。 返回的 JSON 如下所示：

[
    {
        "name": "p75-barth.pdf", 
        "nr": 1, 
        "slideLinks": [
            "slides/0", 
            "slides/1",                
        ]
}]

如果我想访问单个演示文稿并获取例如第一张幻灯片，我可以简单地执行以下操作：

slidecasts/1/slides

返回：

[
    {
        "content": null, 
        "imageLinks": [
            "images/1"
        ], 
        "nr": 0, 
        "title": null
    }
]

我想将演示文稿和幻灯片表示为主干模型。我还想要一个骨架视图，最后只显示幻灯片图像、标题、一些注释和一个前进/后退按钮。

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

$(function (){
    initModel();
    initCollection();
    initView();
    var testSlidecast = new Slidecast();
    testSlidecast.id=1;
    testSlide = new Slide();
    testSlide.id = 5;
    testSlidecast.Slide = testSlide;
    var slideView = new SlideView(({model: testSlidecast}));
})
function initView(){
    SlideView = Backbone.View.extend({
        el: $("#presentation"),
        initialize: function(){
            this.render();
            alert("asd")
        },
        render: function(){
            var variables = { presentation_name: "This is a Test-Slide-Name" };
            var template = _.template( $("#slide_template").html(), {} );
            this.el.html( template );
        }
    });
}
function initModel(){
    Slide = Backbone.Model.extend({
    });
}
function initCollection(){
    Slidecast = Backbone.Collection.extend({
      model: Slide,
      url: function(){
        return 'slidecasts/' + this.id + '/slides'
      }
    });
}

这适用于集合，但我真的不知道如何从那里获取单个幻灯片的信息。像slidecast.slide（"0"）这样的东西可能吗？

我对我的观点的模板也有一些问题：

我的 html 看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link href="style.css" rel="stylesheet"/>
    <script src="http://underscorejs.org/underscore-min.js" > </script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" > </script>
    <script src="http://backbonejs.org/backbone-min.js" > </script>
    <script src="bscript.js" > </script>
    </head>
    <body>
        <div id="presentation"> </div>
    <script type="text/template" id="slide_template">
            <label>Presentation <%= presentation_name %>  </label>
            <img src="" id="slide_pic" />
            <input type="text" id="slide_content" value="asd" />
    </script>
    </body>
</html>

我不断收到错误，即尽管我已经在视图中定义了变量，但我想传递给模板 *presentation_name* 的变量名称仍未定义。

必须显式传递模板范围内的变量。模板不会自动访问视图范围内的变量。而不是：

var template = _.template( $("#slide_template").html(), {} );

尝试

var template = _.template( $("#slide_template").html(), variables);
相关文章：