新建一个api.php文件,内容:
 复制代码 代码如下:
 header('Content-Type: application/json; charset=utf-8');
die(json_encode(array('name'=>'tom')));
 

新建一个index.html文件。(backbone基于jquery、underscore,我们使用Mustache来做模板解析,当然用其他的haml、jade,或者underscore里面的模板也都是可以)

内容:
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/underscore.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/backbone.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/mustache.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/custom.js">  </HEAD>
 <BODY>
  <p><script&nbsp;id="hello-container-template"&nbsp;type="text/template"></p><p><div>{{name}}&nbsp;says:&nbsp;{{message}}&nbsp;</div></p><p></script></p>
 </BODY>
</HTML>

新建一个custom.js文件,内容:
复制代码 代码如下:
// 这是一个管理着 视图/控制/模型 的全局类
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 '/api.php'; // 获得数据的后台地址。
    },
    initialize: function() {
     this.set({'message':'hello world'}); // 前端定义一个message字段,name字段由后端提供。
    }
});
App.Views.Hello = Backbone.View.extend({
el: $("body"),
template: $("#<span style="font-family: monospace; white-space: pre; ">hello-container-template</span>").html(),
initialize: function(options){
this.options = options;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function(){ // render方法,目标只有两个:填充this.el,返回this以便链式操作。
$(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
return this
}
});
App.Controllers.Routes = Backbone.Controller.extend({
routes: {
"!/hello" : "hello",//使用#!/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();

标签:
Backbone.js,Hello,World

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“Backbone.js的Hello World程序实例”

暂无“Backbone.js的Hello World程序实例”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。