backbone.js学习笔记（二） 

<!DOCTYPE html>
<html>
<head>
    <title>backbone</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/underscore-1.8.3.js"></script>
    <script src="js/backbone-1.1.2.js"></script>
    <script>
   $(function(){
    //model    
    search= Backbone.Model.extend({
        defaults: {
        hojinBango:""
        }
    });
    shinsei=Backbone.Model.extend({
        defaults: {
        hojinBango:"111"
        }
    });
    SearchView=Backbone.View.extend({
        el : "#container",
        initialize: function(options) {
            this.render();
        },
        render: function() {
            var template = _.template($("#search_template").html());
            this.$el.html(template(this.model.attributes));
            return this;
        }
    });
    ShinseiView=Backbone.View.extend({
        el : "#container",
        initialize: function(options) {
            this.render();
        },
        render: function() {
            var template = _.template($("#shinsei_template").html());
            this.$el.html(template(this.model.attributes));
            return this;
        }
    });
    
    Main = Backbone.View.extend({
        el : "body",
        initialize : function(b) {
            _.extend(this, b);
            // 検索条件
            this.model = new search();
            this.contentView = new SearchView({
              model: this.model
            });
        },
        events:{
            "click #search":"dosearch"
        },
        dosearch:function(){
            this.model = new shinsei();
            this.contentView = new ShinseiView({
              model: this.model
            });
        }
    });
    new Main();        
   })
    </script>
</head>
<body>
    <button id="check">试试模型和属性操作吧！</button> 

    <div id="container">Loading...</div>
 
     <script type="text/template" id="search_template">
        <label>法人番号：<input name="hojinbango" id="hojinbango"></input></label>
        <input id="search" type="button" value="next"></input>
    </script>
    <script type="text/template" id="shinsei_template">
        <label>法人番号：<%= hojinBango%></label>
    </script>
</body>
</html>

 

posted @ 2016-12-05 19:35  姑射蝉  阅读(108)  评论(0)    收藏  举报