如何使用backbone.js创建一个简单的视图？本篇文章给大家介绍的内容是关于使用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创建一个简单的视图的详细内容。