Question

我是BackBone的新手，正在尝试从集合中练习渲染。我知道这些都不应该用HTML来完成，但朋友给了我这个提示，我想让它工作。我已经完成了很多调试，但我无法说明为什么Pond 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 >")
        })

      }
    });

Answer 1

你没有渲染你的观点。

创建视图后添加：

＆＃13;

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()

＆＃13;

<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>

＆＃13;

BackBone View无法正确渲染，也不确定原因

1 个答案: