2017-03-17 14 views
0

進行中のすべてのファイルアップロード、FileUploadProgressModel、BackboneコレクションのUploadProgressCollectionを保存しています。私はthis.$el、UploadPrograssView以外のすべての機能を持っています。私は$el<body>タグに初期化しました。バックボーンビューが間違っていますel

this.$elをHTMLページの本体要素にしたい代わりに、新しい<body> HTMLElementがあります。 this.$elは、私が望む<body>タグではないため、this.$elを使用してアップロードプログレスバーの要素にアクセスできません。このエラーの原因は何ですか?あなたが明示的にをする必要が

var FileUploadProgressModel = Backbone.Model.extend({ 
    initialize : function(){ 
     this.on("change:loaded_size", function(){ 
      this.set("progress", 100 * this.get("loaded_size")/this.get("total_size")); 
     }); 
    }, 
    defaults : { 
     progress : 0, 
     total_size: 1, 
     loaded_size : 0, 

    } 
}); 
var UploadProgressCollection = Backbone.Collection.extend({ 
    model: FileUploadProgressModel, 
    initialize : function(){ 
    this.on("update", function(){ 
     // View already registered to this event 
    }); 
}, 
}); 


var UploadPrograssView = Backbone.View.extend({ 
    tagName : "body", 
    initialize : function(){ 
     _.bindAll(this, "render"); 
     this.model.bind('change', this.render); 
     this.render(); 
    }, 
    render : function(){ 

     var total_loaded_size = 0; 
     var total_file_upload_size = 0; 
     tracker.forEach(function(model){ 
      if(!isNaN(model.get("loaded_size"))) total_loaded_size += model.get("loaded_size"); 
      if(!isNaN(model.get("total_size"))) total_file_upload_size += model.get("total_size"); 
     }); 

     var progress = parseInt(total_loaded_size/total_file_upload_size * 100, 10) + '%'; 

     //TODO bad way of doing things. I want to user this.$el but it has lost the actual referance to the body instread it has this new HTML element "<body><body>" 
     $('.progress .progress-bar').css(
       'width', 
       progress 
       ); 
     return this; 
    } 
}); 


var tracker = new UploadProgressCollection(); 
var trackerView = new UploadPrograssView({model : tracker }); 
+0

ビューとして '' タグ自体を作るために良いアイデアではありません。ビューをクリアすると、スクリプトタグやプラグインなどで注入されたものなどのすべてがクリアされます。コンテナを ''の中に追加して操作してください。 –

答えて

2

ビューがすでにDOM内の既存の要素を参照したい場合は、あなたの閲覧のためのelプロパティを指定します。 tagNameプロパティが指定されている場合は、の新しい要素が作成されます。詳細については、the docsを参照してください。

だからあなたはあなたがビューを宣言するときにDOMセレクタ文字列にelを設定する必要があります。

var UploadPrograssView = Backbone.View.extend({ 
    el: "body", 
    ... 
}); 
+0

彼らのAPIはとても豊富ですが、私は前にダウンロードボタンを渡すように見えませんでした。学ぶために本を読んでいた。これは機能します。ありがとう – printfmyname

関連する問題