如何使用Backbone.js创建一个简单的视图
示例1：
代码如下
创建以下HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
});
var mView = new CView;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>
说明：
var CView = Backbone.View.extend({
});
上面的代码成为视图的对象。在此代码中，没有实现任何内容。
var mView = new CView;
$('#output').append(mView.el);
我们创建视图的对象，并将视图对象的el属性添加到输出id的标记元素。
运行结果
在Web浏览器中显示HTML文件时，将显示如下效果。似乎没有显示任何内容。
当确认HTML的输出时，您可以看到div标签被添加到id =“output”的div标签内。虽然页面上没有显示字符串，但可以确认视图的视图元素在页面反映出来了。
示例2：字符串显示的view
为可以显示字符串而实现View。
代码如下
编写以下HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
$('#output').append(mView.render().el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>
参考：它也适用于以下代码。
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
mView.render();
$('#output').append(mView.el);
});
说明：
描述render方法中的渲染实现。要输出到HTML的标记设置为el object。el的jquery对象可以用作$ el。由于此代码使用jquery，我们使用$ el而不是el。调用text方法并将字符串“Hello World！”设置为el对象。
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
为视图创建一个对象。调用render（）方法进行页面显示。通过执行render方法，将字符串“Hello World！”设置为el属性，并且可以准备页面显示内容。
然后，它在一个元素中显示el属性的内容，其值为id。el属性可以引用视图对象的el属性，并且可以通过引用作为render（）方法的返回值返回的View对象的el属性来获得相同的结果。
var mView = new CView;
$('#output').append(mView.render().el);
或者，
var mView = new CView;
mView.render();
$('#output').append(mView.el);
运行结果
使用Web浏览器显示上述HTML文件。将显示如下所示的效果。页面上显示字符串“Hello World！”。
当您检查HTML的输出时，可以看到div标签被添加到id =“output”的div标签内，并且字符串“Hello World！”被写入其中。
以上就是如何使用Backbone.js创建一个简单的视图的详细内容，更多请关注其它相关文章！
上一篇： 如何使用CSS中的border-collapse属性
下一篇： css边框样式有多少种