Backbone.js / Coffeescript -- 映射简单的点击事件

发布于 2024-12-17 23:22:51 字数 1924 浏览 0 评论 0原文

我遇到了backbone.js 的盲点。我已经写了这段代码，我想做的就是得到单击按钮时要渲染的测试 div。如果我在 initialize() 函数中调用 render()，它就会进行渲染。但是，我从未触发 render() 函数来响应单击事件。

我缺少什么？

谢谢！

用于简单视图的HTML 容器

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <!-- / Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta content='IE=edge,chrome=1' />
    <meta http-equiv='X-UA-Compatible' />
    <link type="text/css" rel="stylesheet" href="/stylesheets/site.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/underscore-min.js"></script>
    <script type="text/javascript" src="/javascripts/backbone-min.js"></script>
    <script type="text/javascript" src="/javascripts/application.js"></script>
    <script type="text/javascript" src="/javascripts/sample_data.js"></script>
    <title>The Middleman!</title>
  </head>
  <body class='page_classes'>
    <div id='main' role='main'>
      <h1>The Middleman is watching.</h1>
      <div id='band-app'>
        <button id='new-band'>new band</button>
      </div>
    </div>
  </body>
</html>

Coffeescript

SAMPLE_TEMPLATE = """
<div id="my-fine-id">
  My fine id!!!
</div>
"""

$ ->
  class AppView extends Backbone.View
    render: ->
      console.log "rendering"
      @template = _.template SAMPLE_TEMPLATE, {}
      @el.html @template

    initialize: ->
      console.log "constructing"
      @el = $('#band-app')
      @events = {"click button#new-band": "render"}

  app = new AppView()

原文

I'm running into a blind spot with backbone.js. I've written this code and all I'm trying to do is get
the test div to render on button click. If I call render() within the initialize() function, it does render.
However, I never trigger the render() function in response to the click event.

What am I missing?

Thanks!

HTML Container

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <!-- / Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta content='IE=edge,chrome=1' />
    <meta http-equiv='X-UA-Compatible' />
    <link type="text/css" rel="stylesheet" href="/stylesheets/site.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/underscore-min.js"></script>
    <script type="text/javascript" src="/javascripts/backbone-min.js"></script>
    <script type="text/javascript" src="/javascripts/application.js"></script>
    <script type="text/javascript" src="/javascripts/sample_data.js"></script>
    <title>The Middleman!</title>
  </head>
  <body class='page_classes'>
    <div id='main' role='main'>
      <h1>The Middleman is watching.</h1>
      <div id='band-app'>
        <button id='new-band'>new band</button>
      </div>
    </div>
  </body>
</html>

Coffeescript for simple view

SAMPLE_TEMPLATE = """
<div id="my-fine-id">
  My fine id!!!
</div>
"""

$ ->
  class AppView extends Backbone.View
    render: ->
      console.log "rendering"
      @template = _.template SAMPLE_TEMPLATE, {}
      @el.html @template

    initialize: ->
      console.log "constructing"
      @el = $('#band-app')
      @events = {"click button#new-band": "render"}

  app = new AppView()

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑶笙 2024-12-24 23:22:51

马吕斯说的是对的。

通常，您希望在类定义中而不是在初始值设定项中指定事件。事实上，对于这个示例，您根本不需要 initialize 函数：

class AppView extends Backbone.View

  events:
    'click button': 'render'

  render: ->
    @$el.html _.template SAMPLE_TEMPLATE, {}

$ ->
  new AppView el:$('#band-app')

What Marius said is right.

Typically you'd want to specify the events in the class definition, not in an initializer. In fact, for this example you wouldn't need an initialize function at all:

class AppView extends Backbone.View

  events:
    'click button': 'render'

  render: ->
    @$el.html _.template SAMPLE_TEMPLATE, {}

$ ->
  new AppView el:$('#band-app')

回复收藏 0 原文