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未定义。也许这就是问题所在？