BackboneJs入门学习[11]—View实践

searchView=Backbone.view.extend({
  initialize:function(){
    //this.render();
   },
   render:function(){
  //使用underscore这个库来编译模版
  var templete=_.templete($('#search_templete').html().{});
  //加在模块到对应的el属性中
  this.el.html(templete);
  }
});
var searchView=new searchview({el:$("#search_container")});
searchView.render();
//模版
< script id="search_templete">
  < label><%=search_label%></ label>
  < input type="text" id="search_input"/>
  < input type="button" id="search_button" value="search"/>
< /script >

searchview=Backbone.view.extend({
  initialize:function(){
    this.render();
   },
   render:function(){
    var templete=_.templete($("#search_templete).html().{});
    //使用underscore来编译模版
    //加载模版到对应的e l 属性中
    this.el.html(templete);
  },
  //进行事件绑定
  events={
    'click input[type=button]':'doSearch'
    //定义类型为button的input标签的点击事件，触发函数doSearch
 },
 doSeach:function(event){
  alert("search for"+$("#search_input").val());
}
});
var searchview=new SearchView({el:$("#search_container")});

render:function(){
  var  templete=_.templete($("#search_templete").html(),{search_label:"hello"});
  this.el.html(templete);
}
 //需要注意的是：对于实际应用，页面数据的变化要同步到服务器；  最好的方法是：回传变化的数据，然后修改页面上对应的数据，而非刷新页面
例如：
render:function(search_label){
  var templete=_.templete($("#search_templete").html(),{search_label:search_label});
  this.el.html(templete);
},
events:{
  'click input[type=button]':'doChange'
},
doChange:function(event){
  //通过model发送数据到服务器
  this.render('Hello'+$("#search_input").val());
}
});
var searchView=new searchView({el:$("#search_container")});