Может ли свойство ElementRef быть установлено в возвращаемое значение взаимодействия javascript в Blazor? - PullRequest
Новая
       20

Может ли свойство ElementRef быть установлено в возвращаемое значение взаимодействия javascript в Blazor?

0 голосов
/ 15 мая 2018

Я возился с CodeMirror над элементом textarea. Я использую Javascript Interop для достижения этой цели, и он отлично работает при применении зеркала кода. Однако я намерен вернуть этот элемент codemirror и сохранить его в другом элементе ref. 

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
    return CodeMirror.fromTextArea(element,
    {
        mode: 'application/ld+json',
        matchBrackets: true,
        autoCloseBrackets: true,
        indentWithTabs: true,
        lineNumbers: true,
        autofocus: true,
        styleActiveLine: true,
        readOnly: false,
        autoCloseBrackets: true,
        foldGutter: true,
        height: 'auto',
        width: 'auto',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });
});

        public static ElementRef CodeMirrorSetupExt(this ElementRef elementRef)
    {
        var result = RegisteredFunction.Invoke<ElementRef>("BlazorExt.CodeMirrorSetupExt", elementRef);
        return result;
    }

В моем компоненте: 

//in my html i have a textarea with ref of TextArea

ElementRef CodeMirror;
ElementRef TextArea;

protected override void OnAfterRender()
{

    CodeMirror = TextArea.CodeMirrorSetupExt();
}

В идеале, после этого момента я смогу обновить свою ссылку на codemirror, используя ее функции следующим образом. 

    Blazor.registerFunction('BlazorExt.CodeMirrorUpdateExt', (element, Value) =>
{
    element.getDoc().setValue(Value);
});

        public static void CodeMirrorUpdateExt(this ElementRef elementRef, string Value)
    {
        var args = new object[] { elementRef, Value };
        RegisteredFunction.Invoke<object>("BlazorExt.CodeMirrorUpdateExt", args);
    }

В компоненте снова я смогу обновить codemirror следующим образом: 

CodeMirror.CodeMirrorUpdateExt("somedata");

Однако я получаю исключение: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: Невозможно прочитать свойство 'getDoc' с нулевым значением

Это то, что я пытаюсь выполнить вне того, что возможно, или передача объекта javascript codemirror в elementref невозможна?

1 Ответ

0 голосов
/ 15 мая 2018

Нет, это (пока) невозможно. Смотрите здесь

Что вы можете сделать, это зарегистрировать ваш объект javascript глобально и использовать эту ссылку для возможного повторного использования. Вот так: 

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) =>
{
  window.mybject = CodeMirror.fromTextArea(element,
  {
     mode: 'application/ld+json',
     matchBrackets: true,
     autoCloseBrackets: true,
     indentWithTabs: true,
     lineNumbers: true,
     autofocus: true,
     styleActiveLine: true,
     readOnly: false,
     autoCloseBrackets: true,
     foldGutter: true,
     height: 'auto',
     width: 'auto',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
   });
   return true;
 });

public static void CodeMirrorSetupExt(this ElementRef elementRef)
{
    RegisteredFunction.Invoke<bool>("BlazorExt.CodeMirrorSetupExt", elementRef);
}

А потом: 

  Blazor.registerFunction('BlazorExt.CodeMirrorUpdateExt', (element, Value)=>{
    window.myObject.getDoc().setValue(Value);
});

Конечно, вы можете сделать это лучше с массивом и ключом в качестве ссылки.

...