下划线/骨干模板事件

Question

在underscore.js模板中，是否有方法从点击事件中获取模板的数据？例如：

geocoder.geocode({ 
       'address' : $(this.el).find("input[name=locationSearchText]").val() 
      }, function(results, status) { 
       if (results && status && status == 'OK') { 
        this.results = results; 
        var list =_.template("<ul><% _.each(results, function(result){ %><li><%= result.formatted_address %></li><% })%></ul>"); 
        $el.find("#search-results").html(list); 
       }else{ 
        alert("SOMETHING WENT WRONG!"); 
       } 
      }); 

然后在视图骨干：

events: { 
     'click #search-results li': function(data){ 'the data of the `result` that was passed to the template in the each'} 
    }, 

Answer 1

在过去的我做了什么是坚持我想要的数据元素的data-属性，就像这样：

var list =_.template("<ul> 
    <% _.each(results, function(result){ %> 
     <li data-foo=\"<%= result.foo %>\"><%= result.formatted_address %></li> 
    <% })%> 
</ul>"); 

而且回调我能找回它是这样的：

'click #search-results li': function(ev){ 
    var foo = $(ev.currentTarget).data('foo'); 
} 

但是，如果你需要访问整个result对象，而不是将其存储在，你可以做类似于CanJS's element callback呢，在这里你存储对象与jQuery.data元素上的东西的DOM：

this.results = results; 
var list =_.template("<ul><% _.each(results, function(result){ %><li><%= result.formatted_address %></li><% })%></ul>"); 
$el.find("#search-results").html(list).find('li').each(function(i, el) { 
    $(el).data('result', results[i]); 
}); 

然后使用$(ev.currentTarget).data('result')在回调中检索它。