【Backbone】Backbone.js的Hello World程序实例-js-Hello-World

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Backbone.js的Hello World程序实例】，下面是详细的讲解！

Backbone.js的Hello World程序实例

// 这是一个管理着 视图/控制/模型 的全局类
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程序实例的用户互动如下：

　　相关问题：初学Java。求一些Java简单小程序的代码实例

　　答：楼主你连邮箱都没有留，不过我建议你去CSDN注册个账号，上面有很多之类的东西，很方便，免费的。自己动手，丰衣足食埃 百度上去直接搜CSDN第一个点进去注册就行。 >>详细

　　相关问题：为什么用 backbone.js介绍

　　答：Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。 简介 ... >>详细

　　相关问题：backbone.js中源码解析的问题

　　答：你可以直接在model实例调用 model.parse(response, options) 或是把parse定义在model里 var Book = Backbone.Model.extend({ parse: function(resp, options) { // 在这里可以对fetch或是save后服务器返回的原始数据进行调整 return resp; } }); >>详细