0

我四处搜索，发现比我需要做的更复杂的例子。

我有一个 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)
4

3 回答 3

0

我想到了。我在视图的初始化方法中创建了 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)
于 2013-06-13T18:18:57.193 回答
0

PHP 内置了 JSON： 请参阅 PHP JSON 文档

于 2013-06-13T17:57:45.313 回答
0

我没有使用过主干，所以我无法评论如何向 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);
于 2013-06-13T17:58:57.410 回答