1

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* に渡したい変数名が定義されていないというエラーが表示され続けます。

4

1 に答える 1

3

テンプレートのスコープ内の変数は、明示的に渡す必要があります。テンプレートは、ビューのスコープ内の変数に自動的にアクセスしません。それ以外の：

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

試す

var template = _.template( $("#slide_template").html(), variables);
于 2012-05-26T22:02:08.197 に答える