header('Content-Type: application/json; charset=utf-8');
$a = array("name"=>"ylc");
echo $callback.'('.json_encode($a).')';die;
html:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>主题</title>
</head>
<body>
<script id="hello-container-template" type="text/template">
<div>
<p style="color:red;display:inline;">{{name}}</p> says: {{message}}
</div>
</script>
<script src="assets/require.js" data-main="assets/main.js" defer="defer" async="true"></script>
</body>
</html>
js:
/**
* main.js
*/
require.config({
baseUrl: "assets/require",
paths: {
"underscore": "underscore-min",
"jquery": "jquery-min",
"backbone": "backbone",
"mustache": "mustache-min"
},
shim: {
'underscore': {
exports: '_'
},
'jquery': {
exports: '$'
},
'backbone': {
dep: ["underscore", "jquery"],
exports: 'Backbone'
},
'mustache': {
exports: 'Mustache'
}
}
});
require(["underscore", "jquery", "backbone", "mustache"], function(_, $, Backbone, Mustache){
var App = {
Models: {},
Views: {},
Controllers: {},
Collections: {},
initialize: function(){
new App.Controllers.Routes();
Backbone.history.start() // 要驱动所有的Backbone程序,Backbone.history.start()是必须的。
}
};
App.Models.Hello = Backbone.Model.extend({
url: function(){
return "http://www.test.com/test.php";
},
sync: function(method, model, options){
var params = _.extend({
type: "GET",
dataType: "jsonp",
url: model.url() + "?callback=?",
processData: false
}, options);
return $.ajax(params);
},
initialize: function() {
this.set({'message':'hello world'});
}
});
App.Views.Hello = Backbone.View.extend({
el : $("body"),
template: $('#hello-container-template').html(),
initialize : function(options){
this.options = options;
this.bind('change',this.render);
this.model = this.options.model;
},
render : function(){
var template = Mustache.to_html(this.template,this.model.toJSON());
$(this.el).html(template);
return this;
}
});
App.Controllers.Routes = Backbone.Router.extend({
routes :{
"(.*?)" : "hello",
},
hello : function(){
var helloModel = new App.Models.Hello;
helloModel.fetch({
success:function(model){
var helloView = new App.Views.Hello({model:model});
helloView.trigger('change');
}
});
}
});
App.initialize();
});