构造“ResizeObserver”失败：参数1不是“Function”类型

Question

我正在尝试在

textarea

内渲染 HTML，并且我有一个来自控制器的

ajax

调用来读取该值并将其解析为

var 

到

render()

函数。

我按照问题这里

但是，当我尝试在

render()

调用中使用

ResizeObserver

时，

ajax

函数失败。如果我专门定义

var explain = "<b style =\"color:blue;\">Risky</b>";

，则内容可以在

onload

中呈现，但不能在

ajax

调用中呈现。

我可以知道我在这里错过了什么吗？

这些是我的代码：

@Html.TextArea("", new { @id = "box", @oninput = "render()"})

<script type="text/javascript">
    $(document).ready(function () {

      var job_ID = "1";
      var explain = "";

        onload = function () {
                LoadJobResult(job_ID);         
        }

function render() {

            var inp = document.getElementById("box");
            inp.innerHTML += explain;

            var data =
                `<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
                <foreignObject width="100%" height="100%">
                <div xmlns="http://www.w3.org/1999/xhtml" style="font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;">
                ${inp.value} <i style="color:red">Model Explanation</i>
                </div>
                </foreignObject>
                </svg>`;

            var blob = new Blob([data], { type: 'image/svg+xml' });
            var url = URL.createObjectURL(blob);
            inp.style.backgroundImage = "url(" + URL.createObjectURL(blob) + ")";
        }


function LoadJobResult(ID) {
            $.ajax({
                url: '/controller/Get_JobResult',
                type: 'Get',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: { 'job_ID': ID },
                success: function (result) {
                    var res = JSON.parse(result);

                    $("#box").val(res[0]['DRP_Explanation_Txt']);
                    explain = res[0]['DRP_Explanation_Txt']; 
                    
                    render();
                    ro = new ResizeObserver(render(explain));
                    ro.observe(document.getElementById("box"));
                },
                error: function (emp, err) {
                    console.log('my message' + err);
                }
            });         
        }
  });


</script>

Answer 1

我建议你可以修改你的代码以传递渲染函数而不是渲染（解释），然后它会很好地工作。

render() 函数和 render(explain) 函数是不同的东西。

更多详情，您可以参考下面的例子：

function LoadJobResult(ID) {
            $.ajax({
                url: '/controller/Get_JobResult',
                type: 'Get',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: { 'job_ID': ID },
                success: function (result) {
                    var res = JSON.parse(result);

                    $("#box").val(res[0]['DRP_Explanation_Txt']);
                    explain = res[0]['DRP_Explanation_Txt']; 
                    
                    render();
                    var ro = new ResizeObserver(() => render());
                    ro.observe(document.getElementById("box"));
                },
                error: function (emp, err) {
                    console.log('my message' + err);
                }
            });         
        }
  });

结果：