当前位置: 首页 > 编程笔记 >

Backbone.js的Hello World程序实例

韩寂离
2023-03-14
本文向大家介绍Backbone.js的Hello World程序实例,包括了Backbone.js的Hello World程序实例的使用技巧和注意事项,需要的朋友参考一下

新建一个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="./jquery.min.js"></script>

<script type="text/javascript" src="./underscore.min.js"></script>

<script type="text/javascript" src="./backbone.min.js"></script>

<script type="text/javascript" src="./mustache.min.js"></script>

<script type="text/javascript" src="./custom.js"></script>

 </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();

 类似资料:
  • 为了演示如何使用VS 2017创建一个简单的VB.net应用程序,这里将使用VS 2017来创建一个简单的的控制台应用应用程序。这个例子将使用VB语言编写。请参考以下步骤。 第1步:打开VS 2017 ,点击文件(F),选择新建->项目,如下所示 - 第2步:在弹出的对话框中,左侧选择“Visual Basic”,右侧关联项中选择”控制台应用(.NET Framework)“,在下方填写项目名称:

  • - 1.新建一个Module(一个Module就相当于一个app) 如果已经有一个Project,那么可以直接新建一个Module,如果没有先去新建一个Project。 如图: 创建工程,可以参考“开发HelloWorld程序(Android原生)” 这里的Minumum SDK要选择API16及以上,Weex目前只支持到API16级以上。 这个时候我们WXHelloWorld程序的原生壳子就创

  • 打开AndroidStudio新建一个Project 至此,点击finish,等待AS创建工程完成。 左边视图,显示的是我们工程的目录结构。中间MainActivity是Android的Activity组件,我们一般在这里做一些初始化,给空间绑定数据,网络请求和请求结果处理等操作。activitymian.xml是安卓的layout布局文件,我们在这里画界面,最右边是预览窗口,布局文件的改动都可以

  • 先尝试用 D3 写第一个 HelloWorld 程序。学编程入门的第一个程序都是在屏幕上输出 HelloWorld,本课稍微有些不同,不是单纯的输出。 HTML 是怎么输出 HelloWorld 的 都知道 HTML 吧,如果不知道请下百度一下吧。在 HTML 中输出 HelloWorld 是怎样的呢,先看下面的代码。 <html> <head> <meta charset="

  • 本文向大家介绍Cocos2d-x学习入门之HelloWorld程序,包括了Cocos2d-x学习入门之HelloWorld程序的使用技巧和注意事项,需要的朋友参考一下 一、前言: Cocos2d-x是目前非常流行的开源移动2D游戏框架。本文HelloWorld示例程序中使用的Cocos2d-x版本是2.0,主要实现一个简单的入门程序。 二、HelloWorld程序: HelloWorld程序是很多

  • Now that we’ve journeyed through the fundamentals, let’s move on to writing our first Backbone.js app - a Todo List application. Building a Todo List is a great way to learn about Backbone’s conventio