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

UI和JavaScript之间的绑定：不同的范围？

1 个答案: