backbone跨域请求helloworld版

最新推荐文章于 2019-10-10 11:57:57 发布
最新推荐文章于 2019-10-10 11:57:57 发布
阅读量340 收藏
点赞数
分类专栏： JS 文章标签： backbone js require helloworld 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wonewer/article/details/45766951
版权 
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();
});


wonewer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js backbone.js jquery 跨域访问 利用CORS
wordess的专栏
12-24 3379
刚刚接触backbone.js 和 node.js 做跨域处理的时候困扰了我好几天，通过差各种资料终于解决了，但是基本上都是英文的，而且没有完整的一个资料介绍node和backbone的设置，所以发表篇中文的，共咱国人参考！ 因为刚接触不久，以前是写C++服务器的，从来没接触过webserver，所以可能有很多地方说的不深刻，望见谅！如有错误处还请指出，共同探讨！ 首先服务端要允许跨域
backbone、head、neck等深度学习中的术语解释
t20134297的博客
04-25 4万+
我们在阅读文章的时候，经常看到backbone head neck 这一类的术语，但是我们可能并不知道是什么意思，这篇文章就是对这些术语进行解释： backbone：翻译为主干网络的意思，既然说是主干网络，就代表其是网络的一部分，那么是哪部分呢？翻译的很好，主干部分，哈哈哈哈，文字游戏了哈。这个主干网络大多时候指的是提取特征的网络，其作用就是提取图片中的信息，共后面的网络使用。这些网络经常使用...
初探Backbone
weixin_34209851的博客
07-27 306
前言 终于到周末了，几经转折老夫工作终于落实，干起了移动前端，于是真正进入了HTML5的开发时代。 这周一开始入职，进来后发现真的像农村的来到了城市，很多东西不懂的，又要落实租房的问题，生活工作拧到了一坨。 由于上次去河南折腾了一番，经济也在亮红灯，于是第一周有点浑浑噩噩的感觉，还没做什么就结束了。 新的团队的人感觉都有点生猛，老同事完全没压力，另一个新同事适应的很快，居然都能进入框架开发...
Backbone入门讲解
weixin_34318272的博客
01-07 424
Backbone是一个实现了web前端mvc模式的js框架。 一种解决问题的通用方法，我们叫做模式。 设计模式：工厂模式，适配器模式，观察者模式等，推荐js设计模式这本书。设计模式是一种思想。 框架模式：MVC，MVP，MVVM等。框架模式是开发项目的一种方案。 MVC指的是什么？M：model（模型），V：view（视图），C：controller（控制器） MVC模式的思想，把模型和...
ajax请求在header中传递token
xiaoququ的博客
04-02 7008
注意：Token可加不加‘’，此外Token是后台决定的字段，大小写 $.ajax({ // 方法一 headers: { 'Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjkiLCJleHBpcmUiOjE1NTY1Mjc1OTMsImFnZW50IjoiSGFuUGF5XC8xLjAg...
Backbone.js的Hello World程序实例
10-24
主要介绍了Backbone.js的Hello World程序实例,本文给出后端PHP通信、前台HTML、和Backbone.js 代码,需要的朋友可以参考下
backbone_hello_world:骨干实验
07-04
Hello Backbone是一个简单的教程，由不言自明的“hello world”示例组成，并且越来越复杂。 它旨在提供从零到流行的的更平滑过渡。 用： docco *.js 在根目录中使用编译文档。 看到它在行动： :
hello-backbone:骨干中的Hello World
05-25
用编写的Hello World的一个简单示例。 ＃＃这是什么？ 本示例说明如何在Backbone视图中利用Backbone模型属性。 在js / main.js中 应用程序名称空间已创建。 Backbone架构也将是一个简单JavaScript名称空间。 在js /...
Backbone.js的Hello World程序实例.docx
01-13
在本文档中，我们将深入探讨如何使用Backbone.js创建一个简单的“Hello World”程序实例。Backbone.js是一个轻量级的JavaScript库，它为构建结构化的Web应用提供了基础框架，包括模型（Models）、视图（Views）、...
Twisted-在Windows下运行trial的方法
代码就是生产力！
08-10 1866
trial是Twisted的测试脚本程序，由于trial是针对Linux的，编译好的trial在Windows下无法直接运行。下面是解决方法：
一款开源、高颜值的终端terminus，支持Windows、MacOS
weixin_30808575的博客
05-20 5416
主要特色 主题和配色方案 完全可配置的快捷方式 拆分窗格 记住你的标签 PowerShell（和PS Core），WSL，Git-Bash，Cygwin，Cmder和CMD支持 集成的SSH客户端和连接管理器 完整的Unicode支持，包括双宽字符 不会阻碍快速流动的输出 Windows上适当的shell体验，包括选项卡完成（通过Clink） terminus...
跨域CORS原理及调用具体示例
navy_xue的专栏
10-12 7929
上篇博客介绍了JSONP原理，其不足，就是只能使用GET提交，若传输的数据量大，这个JSONP方式就歇菜了。那这篇博客就来介绍另一种跨域介绍方案—CORS。   相对JSONP，CORS支持POST提交，并且实施起来灰常简单，CORS原理只需要向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow
MyBatis ofType和javaType区别
u013216156的专栏
11-27 5万+
JavaType和ofType都是用来指定对象类型的，但是JavaType是用来指定pojo中属性的类型，而ofType指定的是映射到list集合属性中pojo的类型。 pojo类： public class User {     private int id;     private String username;     private
好用又好看的终端——Termius
身披白袍的博客
10-10 2万+
Termius是一款可在PC端和移动端均可使用的终端系统。学生可以免费使用，直到毕业！
resultMap的用法以及关联结果集映射
热门推荐
qq_42780864的博客
08-05 22万+
resultType resultType可以把查询结果封装到pojo类型中，但必须pojo类的属性名和查询到的数据库表的字段名一致。 如果sql查询到的字段与pojo的属性名不一致，则需要使用resultMap将字段名和属性名对应起来，进行手动配置封装，将结果映射到pojo中 resultMap resultMap可以实现将查询结果映射为复杂类型的pojo，比如在查询结果映射对象中包...
fetch 函数传递参数与后台交互
Jadeon
01-03 1万+
介绍fetch函数:fetch( input [，init ]).then(function(response){ }) input定义要获取的资源。这可能是： 一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受blob：和data：作为 schemes. 一个 Request 对象。 init可选： 一个配置项对象，包括所有对请求的设置。可选的参数有： ...
Backbone概述
griffin23的专栏
02-24 693
单页面应用最近公司需要使用backbone来做一些单页面的应用，以前没有接触过backbone，所以马上找了极客学院的课程来学习。以下是学习的笔记。 单页面应用（Single Page Application）是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。整个的应用就是一个页面，在初始化的时候加载html css 和 javascript等，利用javascript与用户交互，并改
Hyperopt中文文档:FMin
FontTian的博客
12-23 1万+
FMinFont Tian translated this article on 22 December 2017这一页是关于 hyperopt.fmin() 的基础教程. 主要写了如何写一个可以利用fmin进行优化的函数,以及如何描述fmin的搜索空间。Hyperopt的工作是通过一组可能的参数找到标量值，possibly-stochastic function的最佳值（注意在数学中stocha
Backbone.js入门教程：Hello World示例
在Backbone.js的Hello World程序中，主要涉及到以下几个关键知识点： 1. Backbone.js：Backbone.js是一个轻量级的JavaScript框架，用于构建可维护的富客户端应用。它提供了模型(Model)、视图(View)、集合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值