Question

我使用php文件从我的MySQL数据库中获取一些数据，现在我希望通过使用json_encode方法传递一个模型在我的View中显示这些数据。到目前为止，我创建了一个路由器，一个模型，一个集合（它是必要的吗？）和一个视图。当我在我的视图中调试集合时，我可以看到数据实际存在，但我的视图没有显示任何内容。当我在console.log模型中我得到了＃34; undefined＆＃34;信息。所以似乎模型没有实例化，但我真的不知道如何解决它。我使用RequireJS和HandlebarsJS进行HTML模板化。

所以这是我的路由器。

define(['backbone',
       'views/firstpage',
       'views/secondpage',
       'views/thirdpage',
       'collections/BandCollection']),
function( Backbone,FirstpageView, SecondpageView, ThirdpageView,BandCollection ) {
   var Router = Backbone.Router.extend({
        routes: {
            '': 'index',
            'firstpage' : 'firstpage',
            'secondpage' : 'secondpage',
            'thirdpage' : 'thirdpage'
          },
        initialize: function () {
           this.bandCollection = new BandCollection();

           this.bandCollection.fetch({
              error: function () {
              console.log("error!!"); 
            },
            success: function (collection) {
            console.log("no error"); 
          }
   });
},

        thirdpage: function() {
            var thirdpageView = new ThirdpageView({ el:'#topContent', collection:this.bandCollection}).render();

        },

    });

    return Router;
    }
 );

我的模型看起来像这样：

define([
"jquery",
"backbone"
],

function($, Backbone) {
var BandModel = Backbone.Model.extend({
    url: "../metal/db/bands.php",

    defaults: {
        "id": '',
        "band": '',
        "label": ''
    }
});

return BandModel;
});

我的收藏：

define([
"backbone",
"models/BandModel"
],

function(Backbone, BandModel) {
var BandCollection = Backbone.Collection.extend({
    model: BandModel,
    url: "../metal/db/bands.php"
});

return BandCollection;
});

我的HTML模板：

<div>
   <p><%= id %></p>
   <p><%= band %></p>
   <p><%= label %></p>
</div>

我的观点看起来像这样：

define(['backbone','handlebars', 'text!templates/Thirdpage.html'],

    function(Backbone,Handlebars, Template) {


        'use strict';

        var ThirdpageView = Backbone.View.extend({

            template: Handlebars.compile(Template),

            initialize: function () {
                _.bindAll(this, 'render');
                this.render();
            },

            render: function() {
                console.log(this.collection);
                this.$el.html(this.template(this.collection.toJSON()));
                return this;
            }

        });

        return ThirdpageView;

    }
);

如前所述，console.log（this.collection）告诉我数据可用..

{length: 6, models: Array[6], _byId: Object, constructor: function, model: function…}

但是console.log（this.model）给了我＆＃34; undefined＆＃34; - 并且View实际显示之前提到的HTML而不是数据，这意味着它实际显示

<div>
<p><%= id %></p>
<p><%= band %></p>
<p><%= label %></p>
</div>

那么，任何人都可以帮助我吗？我没有想法......

Answer 1

在视图中更改render（）方法，如下所示：

render: function() {
   var self = this;
   console.log(this.collection);
   self.collection.each(function(model){
        console.log(this.model);  // can view all models here
        self.$el.append(self.template({id:model.get('id'),band:model.get('band'),label:model.get('label')}));
   });

   return this;
}

像这样更改模板：

<div>
  <p>{{id}}</p>
  <p>{{band}}</p>
  <p>{{label}}></p>
</div>

BackboneJS - 从PHP文件中获取数据并在View中显示

1 个答案: