1

これは私のコードです:

$(function (){
var Slide = Backbone.Model.extend({
    defaults: {
        castid  :1,
        id      :1
    },
    urlRoot:  function(){
        return 'slidecasts/' + this.get("castid") + '/slides/';
    },
});


var SlideView = Backbone.View.extend({
    el: $("#presentation"),
    events: {
        'click #next': 'next',
        'click #previous': 'previous',
    },
    initialize: function(){
        _.bindAll(this, 'render', 'next');
        this.model.bind('change', this.render);
        this.render();
    },
    render: function(){
        this.model.fetch();
        var variables = { 
            presentation_name: "This is a Slide-Number: ",
            slidenumber: "xxx",
            imageurl:  this.model.url() +"/"+ this.model.get('imageLinks'), 
            slide_content:  this.model.get("content")};
        var template = _.template( $("#slide_template").html(), variables );
        this.$el.html( template );
        return this;
    },
    next: function(){
        console.log(this.model.id);
        this.model.nextslide();
    },
    previous: function(){
        console.log("previous function in view");
    }
});

testslide = new Slide();
var slideView = new SlideView({model: testslide});

});

これは正常に動作しますが、デバッグ コンソールでは、もちろん失敗する「slidecasts/1/slides/1/undefined」への GET リクエストが常に表示されます。この取得リクエストをトリガーする場所がよくわかりません。

編集 - テンプレート コード

<script type="text/template" id="slide_template">
  <label>Presentation <%= presentation_name %>  </label> <br/>
  <img src="<%= imageurl %>" id="slide_pic" /> <br/>
  <textarea id="slide_content">
    <%= slide_content %>
  </textarea>
  <div id="next">next slide </div>
  <div id="previous">previous slide </div>  
</script>
4

2 に答える 2

4

非同期の問題があります。

これは一連のイベントです。

  1. モデルを設定するために呼び出しますthis.model.fetch()。
  2. あなたが言うvariables.imageurl = this.model.url() + '/' + this.model.get('imageLinks')。
  3. (非同期)fetchはまだ返されていないのでthis.model.get('imageLinks')、undefined.
  4. HTML を作成し、それを使用this.$el.html(template)してページを更新します。
  5. ブラウザは、不正なimageurlfrom 2を使用して HTML をレンダリングします。
  6. 5が原因で、不正な GET 要求がログに記録されます。
  7. fetchfrom 1がサーバーから戻り、イベントをトリガーします'change'。
  8. この'change'イベントにより、 への新しい呼び出しがトリガーされrenderます。
  9. このrender呼び出しは完全に入力されているthis.modelためvariables.imageurl正しく、今度は HTML が正しく表示されます。

fetchトリガーを許可するrenderと、問題は解決します。

initialize: function(){
    _.bindAll(this, 'render', 'next');
    this.model.bind('change', this.render);
    this.model.fetch();
},
render: function() {
    // As before except no this.model.fetch()
}
于 2012-06-04T18:57:25.527 に答える
1

使用しているテンプレートが表示されない理由は次のとおりです。

問題は次の行にあります。

this.model.url() +"/"+ this.model.get('imageLinks'),

テンプレート<img>はそのような URL で要素を定義しようとしていますが、imageLinks属性はundefinedです。

于 2012-06-04T18:10:09.387 に答える