<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text"  id="type"></input>
<p id="p"></p>
<script>
var html={}
//m
    html.model ={
       
        content:{
            "0":"你好",
            "1":"ok",
            "2":"大家好",
            "3":"你好",
            "4":"ok",
            "5":"大家好"
        },
        data:function(id){
            if(!(id in this.content)){
                var  id = 0;
            }          
            return this.content[id]
        }
 }
//c
    html.controller = {
             
        init:function(){
            var id = html.view.id();  //获取id
            var value = html.model.data(id);     //通过id 过滤数据        
            html.view.init(value);    //把数据加载到页面中
        }
    }
//v
    html.view={
        init:function(value){
            document.getElementById("p").innerHTML= value;
        },
        id:function(){
            return document.getElementById("type").value;
        }
 }
 document.getElementById("type").onchange = html.controller.init;
</script>
</body>
</html>
   

javascript mvc 简单例子的更多相关文章

  1. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  2. 【Spring】简单的Spring MVC入门例子

    前言 测试特性需要搭建一个简单的Spring MVC的例子,遂记录之,只是例子,只为入门者之示例. 版本说明 声明POM文件,指定需引入的JAR. <properties> <spr ...

  3. JavaScript模块化-RequireJs实现AMD规范的简单例子

    AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...

  4. 【JavsScript】JavaScript MVC 框架技术选型

    你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...

  5. 【JavsScript】JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember

    摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...

  6. JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. 你是否应该使用一个Javascript MVC框架？

    你是否应该使用一个Javascript MVC框架?本文摘自smashingmagazine的Journey Through The JavaScript MVC Jungle部分内容,希望对大家有帮 ...

  8. JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember（转载）

    原文地址:http://sporto.github.io/.../comparison-angular-backbone-can-ember/ 原文作者:Sebastian Porto @Twitte ...

  9. ko 简单例子

    Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...

随机推荐

  1. Jump Game —— LeetCode

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. Rotation Lock Puzzle

    Problem Description Alice was felling into a cave. She found a strange door with a number square mat ...

  3. HDOJ(HDU) 2309 ICPC Score Totalizer Software(求平均值)

    Problem Description The International Clown and Pierrot Competition (ICPC), is one of the most disti ...

  4. CentOS squid代理内网主机上网 openVpn配置

  5. Java 中 StringBuilder 在高性能用法总结

    关于StringBuilder,一般同学只简单记住了,字符串拼接要用StringBuilder,不要用+,也不要用StringBuffer,然后性能就是最好的了,真的吗吗吗吗? 还有些同学,还听过三句 ...

  6. String.Split()函数

    我们在上次学习到了 String.Join函数(http://blog.csdn.net/zhvsby/archive/2008/11/28/3404704.aspx),当中用到了String.SPl ...

  7. Codeforces Round #258 (Div. 2)[ABCD]

    Codeforces Round #258 (Div. 2)[ABCD] ACM 题目地址:Codeforces Round #258 (Div. 2) A - Game With Sticks 题意 ...

  8. 【AIX】采用vi语法编辑命令行

    AIX中不能像centos那样移动方向键上.下来查询历史键入的命令行记录 可以通过一条命令采用vim的语法编辑命令行,查询历史记录. # set -o vi 在命令行输入上述命令后就可以: ESC+k ...

  9. ButterKnife 注解

    简介 官网:http://jakewharton.github.io/butterknife/ github:https://github.com/JakeWharton/butterknife 依赖 ...

  10. BestCoder 1st Anniversary

    Souvenir  Accepts: 1078  Submissions: 2366  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 26 ...