Обновление свойства компонента бритвы через JS Interop - PullRequest
Новая
       3

Обновление свойства компонента бритвы через JS Interop

0 голосов
/ 29 марта 2019

Я пытаюсь получить события, возникающие на карте JavaScript OpenLayers, чтобы обновить пользовательский интерфейс в компоненте бритвы, вызвав метод экземпляра для компонента. Экземпляр компонента передается в функцию JavaScript createMap. Когда пользователь нажимает на карту, вызывается метод экземпляра, и свойство (displayText) обновляется внутри метода, но диапазон в пользовательском интерфейсе не обновляется. На данный момент не так много документации о JS Interop с бритвенными компонентами, поэтому я, скорее всего, неправильно пойму этот подход. Может кто-нибудь объяснить, как это сделать?

Index.cshtml 

<script type="text/javascript">
        var dotNetHelper;

        function createMap(instance) {
            dotNetHelper = instance;
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([37.41, 8.82]),
                    zoom: 4
                })
            });

            map.on('click', function (event) {
                console.log(event);
                dotNetHelper.invokeMethodAsync('TestInstance', event.coordinate[0], event.coordinate[1]).then((data) => { console.log(data); });

            });
        }
    </script>

Map.razor 

@page "/map"
@inject IJSRuntime JsRuntime;

<div>
    <button onclick="@CreateMap">create map</button>
</div>
<div>
    <span>@displayText</span>
</div>
<div id="map" class="map" style="width:800px;height:600px;"></div>


@functions {
public string displayText { get; set; } = "test";

async void CreateMap()
{
    displayText = "howdy";
    await JsRuntime.InvokeAsync<int>("createMap", new DotNetObjectRef(this));
}

[JSInvokable]
public string TestInstance(double x, double y)
{
    displayText = $"map clicked at {x}, {y}";
    return $"map clicked at {x}, {y}";
}
}
...