2017-01-18 8 views
1

Я хочу передать данные из модели для просмотра, и я хочу получить эту длину данных в поле зрения и сделать для нее цикл, но свойство length получить undefined, и я не могу передать данные для просмотра есть ошибка в шаблоне HTMLпередавать данные из модели для просмотра в backbone.js

<html> 
<head> 
    <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <div id="container">Loading...</div> 
    <div class="list"> 
     <button id="list">LIST</button> 
    </div> 



     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script> 
    <script type="text/template" id="view_list"> 


    </script> 
    <script type="text/javascript"> 

    var app = {}; 
     app.postModel = Backbone.Model.extend({ 
      url: 'https://jsonplaceholder.typicode.com/comments', 
      defaults: { 
       postId: 0, 
       id: 0, 
       email:"", 
       body:"" 
      } 
     }); 

     app.viewlist = Backbone.View.extend({ 
      el:$(".list"), 
      initialize:function(){ 
       this.model = new app.postModel(); 
      }, 
      template: _.template($('#view_list').html()), 
      events:{ 
       "click #list" : "list" 
      }, 

      list:function(e) 
      { 
       this.model.fetch({ 
        success: function (post) { 

         console.log(post.toJSON().length); 
         this.$el.html(this.template(post.toJSON())); 
        } 
       }); 
      } 


     }); 

     app.viewpost = new app.viewlist(); 


    </script> 


</body> 

и ошибка в HTML сказать

Uncaught TypeError: Cannot read property 'html' of undefined 
    at success (backbone:49) 
    at Object.a.success (backbone-min.js:12) 
    at o (jquery.min.js:2) 
    at Object.fireWith [as resolveWith] (jquery.min.js:2) 
    at w (jquery.min.js:4) 
    at XMLHttpRequest.d (jquery.min.js:4) 

ответ

2

Основываясь на ошибки, похоже, не имеют вид внутримасштаб функции успеха. Это должно работать:

  var view = this; 
      this.model.fetch({ 
       success: function (post) { 

        console.log(post.toJSON().length); 
        view.$el.html(view.template(post.toJSON())); 
       } 
      }); 

Хотя вы, вероятно, следует думать о добавлении render функции в представлении, и, возможно, имея вид послушай моделировать изменения для того, чтобы вызвать его.

initialize: function() { 
    this.model = new app.postModel(); 
    this.model.on('sync', this.render, this); // Backbone 0.9.2 way 

    // Backbone 0.9.9+ way 
    // this.listenTo(this.model, 'sync', this.render); 
} 

render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
}, 

... 

list: function(e) { 
    this.model.fetch(); 
} 
+0

, пожалуйста, я хочу знать, зачем использовать this.listenTo (this.model, 'sync', this.render); и функция списка при вызове – Rana

+2

Обратите внимание, что '.fetch' имеет параметр' context', который может избежать 'var view = this;' –

+1

Подождите, я просто понял, что вы, конечно, на Backbone v0.9.2, этот метод не использует ' t еще есть, я обновлю ответ, чтобы задуматься. – mikeapr4