熟悉 Backbone(二) : 什么是 View

Backbone 中的 View 用来回响反映你 appModel 的样子容貌。它们会监听事宜并作出响应的回响反映。
接下来的教程我不会通知你怎样把 ModelCollection 绑定到 View 上,而是重要议论 View 是怎样运用 javascript 模板库的,尤其是 Underscore.js's _.template
这里我们运用 jQuery 来操纵 DOM 元素,固然你也能够运用其他的库,比方 MooTools 或许 Sizzle,然则 Backbone 的官方文档引荐我们运用 jQuery
接下来,我们以搜刮框为例来新建一个 View

SearchView = Backbone.View.extend({
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});
var search_view = new SearchView();

在《熟悉 Backbone(一) : 什么是 Model》一文我已提到,无论是 ModelView 照样 Collection,当被实例化时,initialize() 要领都会被自动触发。

el 属性

el 属性指的是已在浏览器中建立好的 DOM 对象,每一个 View 都有一个 el 属性,假如它未被定义,Backbone 将会本身建立一个空的 div 元素作为 el 属性。
下面让我们来为 View 建立一个 el 属性,并设为 #search_containe

<div id="search_container"></div>
<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Welcome to Backbone!");
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

此时,Viewel 属性指的是 idsearch_containerdiv 元素。我们此时变绑定了这个 div 元素,那末任何我们愿望触发的事宜都必须在这个 div 元素中。

加载模板

Backbone 是强依赖于 Underscore.js 的,所以我们能够运用 Underscore.js 中的小型模板。
如今,让我们增加一个 render() 要领,并且在 initialize() 中调用它,如许当 View 初始化时便会自动触发 render() 要领。
这个 render() 要领将会经由过程 jQuery 把模板加载到 Viewel 属性中去。

<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(){
            // 经由过程 Underscore 编译天生模板
            var template = _.template( $("#search_template").html(), {} );
            //讲天生的模板加载到 el 属性中
            this.$el.html( template );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

增加监听事宜

我们运用 Viewevents 属性增加监听事宜,记着监听事宜只能增加到 el 属性的子元素上。如今,我们来给子元素 button 增加一个监听事宜。

<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 被点击时触发 alert 
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

向模板中通报参数

模板能够经由过程 <%= %> 的情势运用从 View 中传来的参数。

<script type="text/template" id="search_template">
    <!-- 经由过程 <%= %> 情势运用传来的参数 -->
    <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(){
            //定义须要通报的参数
            var variables = { search_label: "My Search" };
            // 经由过程 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 ){
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

参考

http://backbonetutorials.com/what-is-a-view/
http://documentcloud.github.io/underscore/

http://jsfiddle.net/tBS4X/1/

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000467573
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞