Question

我已经四处寻找并找到了比我需要做的更复杂的例子。

我有一个PHP页面（data.php），它查询MYSQL数据库并返回3名员工的JSON。

在下面的代码中，我已经对返回的JSON进行了硬编码，整个过程按预期工作。

我想知道的是，使用从加载时的data.php获取的JSON替换下面的硬编码JSON的最简单方法是什么。

// Model
Person = Backbone.Model.extend({
defaults: {
    first_name: 'John',
    last_name: 'Doe',
    department: 'Corporate',
    title: 'Admin'
}
});

// List of People
var PeopleCollection = Backbone.Collection.extend({
model: Person
});

var PeopleView = Backbone.View.extend({
tagName: 'ul',

render: function(){
    this.collection.each(function(person){
        var personView = new PersonView({model: person});
        this.$el.append(personView.render().el);
    }, this);
    return this;
}
});

// The View for a Single Person
var PersonView = Backbone.View.extend({
tagName: 'li',

template: _.template( $('#personTemplate').html() ),

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

var peopleCollection = new PeopleCollection(

[{"first_name":"Jodie","last_name":"Smith","short_name":"SmithJ","department":"Creative","phone":"3446","start_date":"0000-00-00","end_date":"0000-00-00","active":"1","title":"Web Design Director","id":"492"},{"first_name":"Michael","last_name":"Johnson","short_name":"JohnsonM","department":"Interactive","phone":"3761","start_date":"0000-00-00","end_date":"0000-00-00","active":"1","title":"Sr. Director, Interactive","id":"569"},{"first_name":"Frank","last_name":"Thomas","short_name":"ThomasF","department":"Distribution","phone":"3516","start_date":"0000-00-00","end_date":"0000-00-00","active":"1","title":"Warehouse Coordinator","id":"454"}]

);

var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el)

Answer 1

PHP内置了JSON： see PHP JSON Documentation

Answer 2

我hevent使用骨干很多，所以我不能评论如何向data.php发出请求，但我假设你知道如何做这个部分...所以我将专注于data.php的内容

$db = new PDO($dsn, $username, $password);
$stmt = $db->prepare('SELECT * FROM people');
$stmt->execute();

$people = array();

while(false !== ($person = $stmt->fetch(PDO::FETCH_ASSOC))) {
  // if you need to do any manipulation to the person structure you would do it here
  // before assigning it to people.
  $people[] = $person; 
}

// prepare our response; json_encode turns our PHP Hash into a JSON string
$response = json_encode(array(
   'total' => count($people), // this will be a Number
   'people' => $people, // this will be a []
   // whatever else you might need from the server side
));

header('Content-type: application/json');
echo $response;
exit;

这会给你一些类似的东西：

{"total":0,"people":[]}

所以你会使用：

var peopleCollection = new PeopleCollection(theAjaxResponse.people);

Answer 3

我明白了。我在视图的initialize方法中创建了我的peopleCollection，然后在PeopleCollection对象里面添加了url属性。参见：

// Person Model
var Person = Backbone.Model.extend({
defaults: {
    first_name: 'John',
    last_name: 'Doe',
    department: 'Corporate',
    title: 'worker'
}
});

// A List of People
var PeopleCollection = Backbone.Collection.extend({
model: Person,
url: '/hr/data.php'

});

// view for all people
var PeopleView = Backbone.View.extend({
tagName: 'ul',

initialize: function() {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },

render: function(){
    this.collection.each(function(person){
        var personView = new PersonView({model: person});
        this.$el.append(personView.render().el);
    }, this);
    return this;
}
});

// The View for a Person
var PersonView = Backbone.View.extend({
tagName: 'li',

template: _.template( $('#personTemplate').html() ),

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

 var peopleView = new PeopleView();
 $(document.body).append(peopleView.render().el)

从PHP获取简单的JSON并用作Backbone集合？

3 个答案: