UIとJavaScript間のバインディング：スコープが異なる？

Question

私はウェブアプリを持っています。このアプリでは、私は動的に編集可能なアイテムのページを持っています。私はちょうどうまく動作する編集部分を持っています。私の問題は、入力要素の変更を自分のデータ構造にバインドすることができないということです。私はフィドルhereを持っています。

var options = []; 

$(document).ready(function() { 
    $(function() { 
    $.material.init(); 
    }); 

    // Initialize the options 
    options.push({ id:1, html:'' }); 
    options.push({ id:2, html:'' }); 
    options.push({ id:3, html:'' }); 

    var optionEditors = $('.option-editor'); 
    for (var i=0; i<optionEditors.length; i++) { 
    $(optionEditors[i]).summernote({ 
     airMode: true, 
     popover: { 
     air: [ 
      ['font', ['bold', 'underline', 'clear']] 
     ] 
     }, 
     callbacks: { 
     onInit: function() { 
      var editor = $('.note-editor'); 
      editor.addClass('form-control'); 
      editor.bind('DOMSubtreeModified', onUpdate); 
      $(this).summernote('code', ' '); 

      var editable = editor.find('.note-editable'); 
      editable.attr('data-id', $(this).attr('data-id')); 
      editable.attr('data-index', $(this).attr('data-index'));   
     } 
     }  
    });  
    } 
}); 

function onUpdate(option) { 
    try { 
     var id = choice.target.getAttribute('data-id'); 
     var index = choice.target.getAttribute('data-index'); 
     alert(id + ' : ' + index) 
     options[index].html = choice.target.innerHTML; 
    } catch (ex) { 
    } 
} 

それはoptions変数が異なるスコープ内にあるほとんどのようだ：私の関連するコードは次のようになります。とても奇妙です。基本的には、入力フィールドのテキストが更新されると、optionsのコンテンツも更新されるはずです。そのため、Printボタンをクリックすると、options変数の内容がコンソールウィンドウに表示されます。私は何が間違っているのか分からない。

Answer 1

var id = choice.target.getAttribute('data-id');この行のchoiceは未定義です。多分それは問題ですか？