backbone view视图

来源：互联网发布：怎么判断端口是否连通编辑：程序博客网时间：2024/06/05 20:37

什么是视图

用来反映应用程序的数据模型是什么样子，并监听事件的变化并作出相应的反应,

view中的一个核心属性是el,它是DOM元素的一个引用，所有视图必须有一个el

<div id="search_container"></div><script type="text/javascript">    SearchView = Backbone.View.extend({        initialize: function(){            alert("Alerts suck.");        }    });    var search_view = new SearchView({ el: $("#search_container") });</script>

加载一个模板

<script type="text/template" id="search_template">  <label>Search</label>  <input type="text" id="search_input" />  <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript">    SearchView = Backbone.View.extend({        initialize: function(){            this.render();        },        render: function(){            // Compile the template using underscore            var template = _.template( $("#search_template").html(), {} );            // Load the compiled HTML into the Backbone "el"            this.$el.html( template );        }    });        var search_view = new SearchView({ el: $("#search_container") });</script>

监听事件

<script type="text/template" id="search_template">  <label>Search</label>  <input type="text" id="search_input" />  <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript">    SearchView = Backbone.View.extend({        initialize: function(){            this.render();        },        render: function(){            var template = _.template( $("#search_template").html(), {} );            this.$el.html( template );        },        events: {            "click input[type=button]": "doSearch"        },        doSearch: function( event ){            // Button clicked, you can access the element that was clicked with event.currentTarget            alert( "Search for " + $("#search_input").val() );        }    });    var search_view = new SearchView({ el: $("#search_container") });</script>

给模板传参数

<script type="text/template" id="search_template">    <!-- Access template variables with <%= %> -->    <label><%= search_label %></label>    <input type="text" id="search_input" />    <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript">     SearchView = Backbone.View.extend({        initialize: function(){            this.render();        },        render: function(){            //Pass variables in using Underscore.js Template            var variables = { search_label: "My Search" };            // Compile the template using underscore            var template = _.template( $("#search_template").html(), variables );            // Load the compiled HTML into the Backbone "el"            this.$el.html( template );        },        events: {            "click input[type=button]": "doSearch"          },        doSearch: function( event ){            // Button clicked, you can access the element that was clicked with event.currentTarget            alert( "Search for " + $("#search_input").val() );        }    });            var search_view = new SearchView({ el: $("#search_container") });</script>

0 0