Backbone.js学习笔记 Hello World!

Hanks10100 发布于2019-08-22 10:55 / 2483人阅读

摘要：使用和架构创建一个典型的项目。属性被赋值给传入的函数运行的结果。渲染，我们使用，这是一个对象，它指向的属性，使用函数使用的结果替换。最后，启动整体应用，为了保证完全加载，用包装器调用完整日常练习一些在对象初始化的时候执行的代码

使用Backbone.js 和 MVC 架构创建一个典型的Hello world项目。虽然是“杀鸡用牛刀了”，毕竟是我第一次使用Backbone.js

依赖

jQuery 1.9.1

Undersore.js 1.5.0

Backbone.js

开始





backbone日常练习

在 extend 调用里设置指定的 routes 属性:

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
});

Backbone中routes 属性需要下面的格式： ‘path/:param’: "action"，它实现了是当URl是 filename#path/param时，触发名为action 的函数（在Router 对象里定义）。然后添加一个 home 路由：

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
});

现在我们需要添加一个 home 函数：

var router = Backbone.Router.extend({
    routes: {
        " ": "home"
    }
    ‘home’: function (){
        // 渲染 HTML
    }
});

添加创建和渲染 View 的逻辑。现在先定义 homeView:

var homeView = Backbone.View.extend({    
});

然后给 homeView 添加属性

var homeView = Backbone.View.extend({    
    el: "body",
    teplate: _.template("Hello world!")
});

el 是一个保存 jQuery 选择器的字符串，也可以使用"."作为类和"#"作为ID名。template属性被赋值给传入 Hello World 的 Underscore.js 函数 template 运行的结果。

渲染 homeView，我们使用 this.$el，这是一个 jQuery 对象，它指向 el 的属性，使用 jQuery.html() 函数使用 this.template() 的结果替换 HTML。下面是完整的 homeView 代码：

var homeView = Backbone.View.extend({
        el: "body",
        template: _.template("Hello World"),
        render: function (){
            this.$el.html(this.template({}));
        }
    });

现在我们返回到 router，添加两行到 home 函数：

var router = Backbone.Router.extend({
        routes: {
            "": "home"
        },
        initialize: function (){
            // 一些在对象初始化的时候执行的代码
        },
        home: function (){
            this.homeView = new homeView;
            this.homeView.render();
        }
    });

第一行创建了一个 homeView 对象并且赋值给 router 的 homeView 属性。第二行调用 homeView 对象的 render() 方法，触发 Hello World! 输出。

最后，启动整体 Backbone 应用，为了保证 Dom 完全加载，用 $(function (){}) 包装器调用 new router：

var app;
$(function (){
    app = new router;
    Backbone.history.start();
});

完整DEMO





backbone日常练习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91452.html

Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
Backbone.js学习笔记（二）细说MVC

摘要：因为是一条数据记录，也就是说，相当于是一个数据集。通常我们需要重载函数，声明，以及通过或为视图指定根元素。通过绑定视图的函数到模型的事件模型数据会即时的显示在中。实例属性参数以及类属性参数会被直接注册到集合的构造函数。对于初学backbone.js的同学可以先参考我这篇文章：Backbone.js学习笔记（一） Backbone源码结构 showImg(https://segme...

taoszu 2019-08-21 10:29 评论0 收藏0
Backbone.js学习笔记：图书案例-事件绑定

摘要：数据更新的时候，支持多事件和自定义事件。然后使用两个事件和的自定义事件。我们将使用别名函数。是为了模拟从服务器获取响应的时间。在它内部里面，使用和返回模型属性把选中的模型赋值给当前视图的模型。前言：我们继续使用上一次写的图书案例，在基础上面进行改进！事件绑定在我们浏览网页的时候，获取数据并不是一下只就全部获取到的，为了创建一个更好的用户体验，就来模拟一个加载（Spi...

caige 2019-08-21 10:26 评论0 收藏0
python学习笔记1---python的基本数据类型

摘要：数字整型与浮点型整数没有之分浮点数里面没有单精度和双精度之分表示整除进制进制，进制，进制，进制，，，。。。。 Number：数字 1）整型与浮点型整数：int（没有short、int、long之分）浮点数：float（python里面没有单精度和双精度之分） >>> print(hello world) hello world >>> 1 1 >>> 133434 133434 >...

mgckid 2019-07-31 11:12 评论0 收藏0