在 coffeescript 类中包装meteor.js 车把模板

Posted

技术标签:

【中文标题】在 coffeescript 类中包装meteor.js 车把模板【英文标题】:Wrapping meteor.js handlebars templates in coffeescript classes 【发布时间】:2012-05-25 07:12:08 【问题描述】:

我完全在研究流星,但我一直在努力减少示例的全局性并添加一些 OOP。

目前,我的代码如下所示:

# View for Search Form
form = Template.SearchForm  
form.events =
  'submit #search_form' : query_submitted
  'click #load_more' : -> Songs.get_next_page()
  'focus #query' : clear_query_field

form.page = -> Songs.page
form.total_pages = -> Songs.total_pages 

但是,一个脊椎或脊椎,我真正想要的是这样的:

class SearchForm extends Template.SearchForm
  events:
    'submit #search_form' : query_submitted
    'click #load_more' : -> Songs.get_next_page()
    'focus #query' : clear_query_field


  page : -> Songs.page
  total_pages : -> Songs.page

  # etc etc

form = new SearchForm

在流星中包裹车把模板的正确方法是什么?

我已设法包装 Meteor.Collection,但由于把手以模板命名对象,我不确定为模板执行此操作的正确方法。

更新

@greg 指出您可以使用 _.extend 添加属性。那行得通,但是如果我想将事件处理程序方法“query_submitted”和“clear_query_field”折叠到类中怎么办?像这样的:

_.extend Template.SearchForm,
  events :
    'submit #search_form' : @query_submitted
    'click #load_more' : -> Songs.get_next_page()
    'focus #query' : @clear_query_field

  page : -> Songs.page
  total_pages : -> Songs.total_pages

  clear_query_field : (event) ->
    console.log 'focus'

  query_submitted : (event) ->
    event.preventDefault()
    Songs.clear()
    Songs.query = $('#query')[0].value 
    Songs.search()

不太好用。事件处理程序没有被正确调用,我在控制台中收到错误,例如:

Uncaught TypeError: Object [object Window] has no method 'query_submitted'

同样,

events :
    'submit #search_form' : (e) -> @query_submitted(e)

给予:

未捕获的类型错误:无法调用未定义的方法“调用”

那么缺少什么?

【问题讨论】:

【参考方案1】:

Meteor 带有下划线,因此您可以:

_.extend Template.SearchForm,
  events:
    'submit #search_form' : query_submitted
    'click #load_more' : -> Songs.get_next_page()
    'focus #query' : clear_query_field

  page: -> Songs.page

  total_pages: -> Songs.page

【讨论】:

谢谢,@greg!我找到了 _.extend 解决方案,但我仍然无法扩展以包含事件处理程序函数。我已经更新了问题,你能看一下吗?【参考方案2】:

您是否尝试过用 Template.Searchform 替换 @。在您的事件绑定中?

【讨论】:

如果您首先使用处理程序进行扩展,然后使用事件定义再次扩展,则此方法有效:_.extend Template.SearchForm, clear_query_field : (event) -> yadda yadda _.extend Template.SearchForm events: 'focus #query' : clear_query_field ... @ScottSimon 您能否就您的发现提供原始问题的更新。 tks

以上是关于在 coffeescript 类中包装meteor.js 车把模板的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 WebStorm IDE 在 Meteor 应用程序中调试 CoffeeScript

生产中的 Meteor coffeescript 源图

使用 Iron Router 在 Meteor 包中包含 HTML 模板

如何在 Meteor 的 Summernote 中包含 CodeMirror?

Angular-Meteor - 如何在基于包的设计中包含 ng 模板?

Meteor:我应该如何更新用户集合以在对象/字典中包含一个新属性?