1

navbar に (クラス .story を使用した) リンクがあり、クリックすると、ストーリー テンプレートがキャンバス div にレンダリングされ、ユーザーに情報が提供されます。情報を読んだ後にテンプレートを削除するオプションをユーザーに提供したいのですが、テンプレートの削除「x」にクリックイベントを設定できません。

私は問題を知っていると思います。私の StoryView el はその中の<div id="story">何かにイベントを設定できるので、そのビューに関連付けられていない別の div にレンダリングされるため、そのビューから削除することはできません。

ここに問題を示すフィドルがあります。更新、間違ったフィドルを含めました。今修正しました。

http://jsfiddle.net/mjmitche/RRXnK/145/

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>
4

1 に答える 1

2

ビューの el でのみイベントをリッスンできる理由を理解するには、最初に backbone.jsがイベントをリッスンする方法を理解する必要があります。

backbone.js では、イベントは(jQuery または Zepto を使用して) ビューのel. あなたの場合、あなたのビューelは#storyあなたの削除イベントがトリガーされていないということです。

あなたができることは、クリックしてテンプレートをレンダリングするときです。setElementelを使用してビューの 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 を更新する

于 2013-02-07T21:09:52.533 に答える