2 
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <link rel="stylesheet" href="Assets/CSS/jquery-ui.css" />  
    <script type="text/javascript" src="JS/libs/Jquery/jquery-1.7.1.js"></script>  
    <script type="text/javascript" src="JS/libs/Jquery/jquery-ui.js"></script>  

    <script type="text/javascript" src="JS/libs/Underscore/underscore-min.js"></script>
    <script type="text/javascript" src="JS/libs/Backbone/backbone-min.js"></script>
    <script type="text/javascript" src="JS/libs/LocalStore/backbone.localStorage-min.js" ></script> 

    <script type="text/template" id="item-template">
          <div><%= macAddress %></div>
          <div><%= labelD %></div>
          <div><%= typeD %></div>
    </script>

    <script type="text/javascript">
      window.DeviceModel = Backbone.Model.extend({
        initialize : function() {
          this.macAddress = this.get('macAddress');
          this.labelD = this.get('labelD');
          this.typeD = this.get('typeD');
        }
      });
      window.DevicesCollection = Backbone.Collection.extend({ 
        model: DeviceModel,
        localStorage: new Store("backbone-integrator1")
      });

      window.DeviceView = Backbone.View.extend({
        el: 'body',
        template: _.template($('#item-template').html()),
        initialize: function () {
        },
        render: function(){
          return $(this.el).append(this.template(this.model.toJSON())) ;
        }
      });  

      var data =  /* your JSON data */ [
          {
            "macAddress": "00-03-EA-0A-50-A1",
            "labelD": "Wattbox3",
            "typeD": "WB"
          },
          {
            "macAddress": "00-03-EA-0A-50-A2",
            "labelD": "Wattbox2",
            "typeD": "WB"
          }
        ];

        var integrator = _.clone(data);

      var devices = new DevicesCollection(integrator);  

      var list = new DeviceView();
      list.render();

    </script>


  </body>
</html>

我有一个 JSON 对象，我想将此 JSON 对象转换为模型，然后想在屏幕上显示模型。但是这里的视图没有渲染，它没有与模板映射。任何人都可以查看代码并告诉我哪里出错了。

4

1 回答 1

2

有几个问题。首先，您永远不会将集合实例传递给视图实例。其次，您有一个将呈现一个设备的模板，因此您需要呈现集合中的每个项目。我还将 DeviceView 重命名为 DevicesView，因为它现在正在渲染每个设备。

这是一个 jsFiddle：http: //jsfiddle.net/phoenecke/QLm5k/4/

window.DeviceModel = Backbone.Model.extend({
    initialize : function() {
      this.macAddress = this.get('macAddress');
      this.labelD = this.get('labelD');
      this.typeD = this.get('typeD');
    }
  });
  window.DevicesCollection = Backbone.Collection.extend({ 
    model: DeviceModel,
    localStorage: new Store("backbone-integrator1")
  });

  window.DevicesView = Backbone.View.extend({
    el: 'body',
    template: _.template($('#item-template').html()),
    initialize: function () {
    },
    render: function(){
        // render each model in the collection
        this.collection.each(function(model){
            this.$el.append(this.template(model.toJSON())) ;
        }, this);
    }
  });  

  var data =  /* your JSON data */ [
      {
        "macAddress": "00-03-EA-0A-50-A1",
        "labelD": "Wattbox3",
        "typeD": "WB"
      },
      {
        "macAddress": "00-03-EA-0A-50-A2",
        "labelD": "Wattbox2",
        "typeD": "WB"
      }
    ];

    var integrator = _.clone(data);

  var devices = new DevicesCollection(integrator);  

  // pass collection to the view
  var list = new DevicesView({collection:devices});
  list.render();
于 2013-05-01T05:47:25.777 回答