BackBone View не отображается правильно и не уверен, почему

Я новичок в BackBone и пытаюсь практиковать рендеринг из коллекции. Я знаю, что ничто из этого не должно быть сделано в HTML, но друг дал мне это приглашение, и я хочу заставить его работать. Я сделал много отладки, но я не могу понять, почему Pond View не отображается правильно?BackBone View не отображается правильно и не уверен, почему

<html> 
     <head> 
     <title>Pond Maker</title> 
     </head> 
     <body> 
     <div id="app"> 

     <div id="#fishes"></div> 
     </div> 
     <script src="lib/jquery.js"></script> 
     <script src="lib/underscore.js"></script> 
     <script src="lib/backbone.js"></script> 
     <script src="fishModel.js"></script> 
     <script src="pondView.js"></script> 
     <script type="text/javascript"> 
      var goldfish = new Fish({ 
      name: 'Goldfish', 
      image: 'http://tinyurl.com/n4vgcl5' 
      }); 
      var fugu = new Fish({ 
      name: 'Pufferfish', 
      image: 'http://tinyurl.com/kxd7cuu' 
      }); 
      var tuna = new Fish({ 
      name: 'Tuna', 
      image: 'http://tinyurl.com/kxd7cuu' 
      }); 
      var myPond = new Backbone.Collection([goldfish, fugu, tuna], {model: Fish}); 
      var pondView = new PondView({collection: myPond}); 
     </script> 

     </body> 
    </html> 


    var Fish = Backbone.Model.extend({ 
     defaults: { 
     name: "Larry", 
     image: 'http://www.google.com' 
     } 
    }); 

    var PondView = Backbone.View.extend({ 

     el: "#app", 
     tagName: 'table', 


     initialize: function() { 
     this.listenTo(this.collection, "change:name", this.render); 

     }, 


     render: function() { 
     $('#fishes').html(''); 
     this.collection.each(function(fish) { 
      $('#fishes').append('<tr><td><%=' + fish.get("name") + '%> < /td><td><img src ="' + fish.get('image') + "/>< /td></tr >") 
     }) 

     } 
    });

источник

2015-09-24 devdropper87

Вы не сделали ваш просмотр.

Добавить после создания вида:

var Fish = Backbone.Model.extend({ 
 
    defaults: { 
 
    name: "Larry", 
 
    image: 'http://www.google.com' 
 
    } 
 
}); 
 

 
var PondView = Backbone.View.extend({ 
 
    el: "#app", 
 
    tagName: 'table', 
 

 
    initialize: function() { 
 
    this.listenTo(this.collection, "change:name", this.render); 
 
    }, 
 

 

 
    render: function() { 
 
    this.$el.html(''); 
 

 
    this.collection.each(function(fish) { 
 
     this.$el.append('<tr><td>' + fish.get("name") + ' </td><td><img src="' + fish.get('image') + '" /></td></tr>') 
 
    }.bind(this)) 
 

 
    } 
 
}); 
 

 
var goldfish = new Fish({ 
 
    name: 'Goldfish', 
 
    image: 'http://tinyurl.com/n4vgcl5' 
 
}); 
 
var fugu = new Fish({ 
 
    name: 'Pufferfish', 
 
    image: 'http://tinyurl.com/kxd7cuu' 
 
}); 
 
var tuna = new Fish({ 
 
    name: 'Tuna', 
 
    image: 'http://tinyurl.com/kxd7cuu' 
 
}); 
 
var myPond = new Backbone.Collection([goldfish, fugu, tuna], {model: Fish}); 
 
var pondView = new PondView({collection: myPond}); 
 

 
pondView.render()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://underscorejs.org/underscore.js"></script> 
 
<script src="http://backbonejs.org/backbone.js"></script> 
 

 
<div id="app"> 
 
    <div id="#fishes"></div> 
 
</div>

источник

2015-09-24 05:09:49

что не получилось :( – devdropper87

Вы только что получили много ошибок в шаблоне, и вы на самом деле хочет, чтобы создать таблицу, и сделать его ' fishes', поэтому вам нужно соответствующим образом изменить свое мнение. –

BackBone View не отображается правильно и не уверен, почему

ответ

Смежные вопросы