backbone.js學習筆記（二）

時間 2019-11-09

標籤 backbone.js backbone 學習筆記欄目 JavaScript 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。