Phonegap-Android的backbone-min.js之模型

最新推荐文章于 2021-01-26 14:11:06 发布

体温点蜡烛

最新推荐文章于 2021-01-26 14:11:06 发布

阅读量270

点赞数

分类专栏：手机开发

本文链接：https://blog.csdn.net/lc_880627/article/details/41247417

版权

手机开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

backbone-min.js的作用？打个比方，在Android中，我们可以在xml里面定义一个<TextView />，然后在Acitivity里面定义一个TextView对象，然后可以通过findViewById将xml中的<TextView/>关联到TextView对象。我们可以操作TextView对象达到操作<TextView/>在界面中的展示。

我们可以利用backbone-min.js在<script>标签中定义自己的类和类的对象；可以将dom元素与定义的对象进行绑定；可以对视图元素进行数据绑定与更新等等。

定义一个模型（类与类的对象）

	function createObject(){
		var TodoItem=Backbone.Model.extend({});//定义一个类TodoItem
		var todoItem=new TodoItem({//定义一个TodoItem的对象
		item:"todoItemTest",
		});
		var message=todoItem.get("item");//通过get/set方法可以访问对象的属性
		alert(message);
	}

html的<head>中要引用2个js：

<script type="text/javascript" charset="utf-8" src="../underscore-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../backbone-min.js"></script>

underscore-min.js要写在<span style="font-family: Arial, Helvetica, sans-serif;">backbone-min.js前面，因为backbone.js依赖underscore-min.js，</span>

完整代码：

<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>index.html</title> 
	<link rel="stylesheet" href="../jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" charset="utf-8" src="../jquery.js"></script>
	<script type="text/javascript" charset="utf-8" src="../jquery.mobile-1.0.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="../cordova-2.0.0.js" ></script>
	<script type="text/javascript" charset="utf-8" src="../underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../backbone-min.js"></script>
	<script type="text/javascript" charset="utf-8">	
	
	$(document).ready(function(){
		document.addEventListener("deviceready", onDeviceReady, false);	
	});
	
	function onDeviceReady()
	{
		$(".content").html("<ul data-role='listview'><li>"+device.name+"</li><li>"+device.cordova+"</li><li>"+device.platform+"</li><li>"+device.version+"</li><li>"+device.uuid+"</li></ul>");	
		createObject();
	}
	
	function createObject(){
		var TodoItem=Backbone.Model.extend({});
		var todoItem=new TodoItem({
		item:"todoItemTest",
		});
		var message=todoItem.get("item");
		alert(message);
	}
	</script>
</head> 
<body>
<!-- begin first page -->
<div id="page1" data-role="page" >
<header data-role="header"><h1>Hello World</h1></header>
<div data-role="content" class="content">
<h3>HelloWold</h3>

</ul>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</div>
<!-- end first page -->
</body>
</html>

运行结果：