Question

我在导航栏中有一个链接（带有类.story），如果单击该链接，则会将故事模板呈现为画布div，以便向用户提供信息。我想在阅读信息后给用户提供删除模板的选项，但是，我无法在模板中的删除“x”上设置点击事件。

我想我知道这个问题。我的StoryView el是<div id="story">所以我可以在其中设置任何事件，但由于它渲染到另一个没有附加到该视图的div，我无法从该视图中删除它。

这是一个显示问题的小提琴。更新，我包括了错误的小提琴。现在修好了。

HTML

<div id="story">
   <a href="#" class="story">click this story link to render into canvas_id but how to set event to remove?</a>
</div>

<div id="canvas_id"></div>

查看

var StoryView = Backbone.View.extend({

  el: $("#story"),

   events: {
      'click .story': 'render', 
       'click .delete': 'test'

    },

     initialize: function() {

    },
   render: function(){
     var template = $('#story_template').html();
    this.template = _.template(template);
    $('#canvas_id').html(this.template());
   },

    test: function() {
   alert("delete"); 
        <!--  click .delete event not triggering -->
    },

    remove: function(){
     alert("how to remove the template");   
        <!-- how to remove template after rendering -->
    }


  });

var story_view = new StoryView();

模板：

<div id="story">
   <a href="#" class="story">click this story link to render into canvas_id but how to set event to remove?</a>
</div>

<div id="canvas_id"></div>

<script id="story_template" type="text/underscore">
"I want to make the x
    after this story clickable to remove the template
    but since it's not within the #story div (which
    is just a navbar in my real app), it's not working"
<span class="delete">X</span>



</script>

Answer 1

要理解为什么你只能听取你视图中的事件，你需要先了解backbone.js 如何监听事件。

在backbone.js中，事件是delegated（使用jQuery或Zepto）到视图的el。在您的情况下，您的视图el为#story，您的移除事件未被触发。

您可以执行的操作是，当您点击呈现模板时，可以使用setElement重新分配视图，这也会将视图委派事件移动（重新委托）给新el（（正如@muistooshort指出的那样）。

例如

   render: function(){
     var template = $('#story_template').html();
    this.template = _.template(template);
    $('#canvas_id').html(this.template());
       this.setElement($('#canvas_id'));
   },

在您的移除活动中，您可以将el重新分配回#story元素。

更新jsFiddle

渲染后删除模板时不再在同一视图的范围内

1 个答案: