<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="../../app-min.css">

    <script src="../../jquery/jquery-1.10.2.js"></script>

    <script src="../underscore.js"></script>

    <script src="../backbone.js"></script>

    <script>

        var SearchView = Backbone.View.extend({

            initialize: function() {

                console.log('init a SearchView')

            },

            render: function(context) {

                var template = _.template($('#search_template').html(), context)

                $(this.el).html(template)

            },

            events: {

                'click input[type=button]': 'doSearch'

            },

            doSearch: function(event) {

                console.log('search for ' + $('#search_input').val())

            }

        })

        var searchView = new SearchView({el: $('#search_container')})

        searchView.render({search_label: '搜索渲染'})

    </script>

    <article class="content">

        <pre>var SearchView = Backbone.View.extend({

    initialize: function() {

        console.log('init a SearchView')

    },

    render: function(context) {

        var template = _.template($('#search_template').html(), context)

        $(this.el).html(template)

    },

    events: {

        'click input[type=button]': 'doSearch'

    },

    doSearch: function(event) {

        console.log('search for ' + $('#search_input').val())

    }

})

var searchView = new SearchView({el: $('#search_container')})

searchView.render({search_label: '搜索渲染'})</pre>

    </article>

</body>

</html>

-_-#【Backbone】View的更多相关文章

  1. -_-#【Backbone】Router

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. -_-#【Backbone】Collection

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. -_-#【Backbone】Model

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Linu下的Mysql学习详解_【all】

    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...

  5. Mysql 系统学习梳理_【All】

    0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...

  6. 【MVC】View与Control之间数据传递

    1. Controller向View传递数据 使用ViewData传递数据[弱类型,字典型ViewDataDictionary] ViewData[“Message_ViewData”] = “ He ...

  7. Linux 下LNMP环境搭建_【all】

    LNMP = Linux + Nginx + Mysql + PHP 1.0 Linux环境搭建 Linux 系统安装[Redhat] 1.1. FastCGI介绍 1.什么是CGI(common g ...

  8. Python 系统学习梳理_【All】

    Python学习 1. Python学习---Python安装与基础1205 2. Python学习---PyCharm的使用学习 3. Python学习---Python数据类型1206 4. Py ...

  9. 企业级NFS网络文件共享服务_【all】

    1.1. 什么是NFS(1台机器提供服务) Network File System(网络文件系统)通过局域网让不同的主机系统之间共享文件或目录. NFS客户端可以通过挂载的方式将NFS服务器端共享的数 ...

随机推荐

  1. [Javascript] Logging Pretty-Printing Tabular Data to the Console

    Learn how to use console.table to render arrays and objects in a tabular format for easy scanning ov ...

  2. Enterprise Architect使用教程

    一.Enterprise Architect简介 Enterprise Architect是一个对于软件系统开发有着极好支持的CASE软件(Computer Aided Software Engine ...

  3. [置顶] UNIX常用命令

    scp命令用于两个机器之前文件的拷贝 scp 被拷贝文件 远程机器用户名@远程机器IP:拷贝目的目录或者拷贝目录下的目的文件 dos2unix 在执行编译文件时,本来应该生成可执行文件a,但是执行完后 ...

  4. 深入探索C++对象模型-5

    虚拟继承下的对象构造: 由于虚拟基类对象在子类中只能保持一个实例,那么,子类构造的时候调用父类的构造函数的时候必须保证虚拟基类对象不能够重复构造. 那么如何保证基类对象的唯一性? C++规定虚拟基类对 ...

  5. 从页面底部向上弹出dialog，消失时逐渐向下（转）

    我想实现一个效果,从底部向上逐渐弹出.如下图所示: 1.点击 显示 按钮时,一个dialog对话框从底部慢慢向上弹出. 2.关闭dialog时, dialog缓慢的移动向底部消失.很平滑的效果.   ...

  6. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

  7. java之JDBC

    java之JDBC 一.什么是JDBC Java 数据库连接,(Java Database Connectivity,简称JDBC)是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提 ...

  8. Sublime Text插件之Emmet

    转载:http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html Emmet插件以前被称作为Zen Co ...

  9. Android定时器功能实现方法

    在Android开发中,定时器一般有以下3种实现方法: 1.采用Handler与线程的sleep(long)方法 2.采用Handler的postDelayed(Runnable, long)方法 3 ...

  10. Android设计图（标注、切图）

    1.Android: 1)Android的单位是dp 2)分为ldpi/mdpi/hdpi/xhdpi/xxhdpi. 3)分辨率对应DPI ldpi  QVGA (240×320) mdpi  HV ...