wasm 中的双向绑定答案

【问题标题】：Twoway binding in wasmwasm 中的双向绑定
【发布时间】：2019-10-27 16:11:18
【问题描述】：

我正在测试 Uno 平台和 wasm。

我测试了一个简单的数据绑定，其中我在登录到 webapi 后在文本框中有一个用户名我更新了用户名的属性以测试来自 viewmodel 中绑定属性的 gui 更新。

xml。

在登录按钮中

        var result = await webApiClient.LoginUser(ViewModel.LoginModel);
        ViewModel.LoginModel.Email = result.Model.Name;

如果我在 UWP 下运行应用程序，它可以工作，在 wasm 下，文本框不会更新。

<Page
x:Class="DeviceExchange.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DeviceExchange"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ios="http://nventive.com/ios"
xmlns:wasm="http://nventive.com/wasm"
mc:Ignorable="d ios wasm">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Device Exchange 
 Portal" Margin="20" FontSize="30" />
     <TextBlock Grid.Row="2" Grid.Column="1" Text="username" Margin="3" 
 FontSize="15" />
     <TextBox Grid.Row="3" Grid.Column="1" Text="{x:Bind LoginModel.Email, 
 Mode=TwoWay}" Background="White" />
     <TextBlock Grid.Row="4" Grid.Column="1" Text="username" Margin="3" 
 FontSize="15" />
     <PasswordBox Grid.Row="5" Grid.Column="1" Password="{x:Bind 
LoginModel.Password, Mode=TwoWay}" Background="White"/>
     <Button Margin="0,5" Click="LoginButton_Click" 
VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Row="6" 
Grid.Column="1" x:Name="LoginButton" Content="Login" />
 </Grid>
 </Page>

【问题讨论】：

能分享一下xaml代码吗？
您是否验证过 API 调用有效？如果添加Console.WriteLine(result.Model.Name)，在浏览器控制台中看到了什么？
嗨，我的控制台显示 this.mono_wasm_runtime_ready mono.js:1 失败：Windows.UI.Xaml.UIElement[0] mono.js:1 Uno 中未实现成员事件 PointerEventHandler UIElement.PointerWheelChanged。 mono.js:1 失败：Uno.UI.DataBinding.BindingPropertyHelper[0] mono.js:1 [ScrollViewer] 属性获取器在类型 [Windows.UI.Xaml.Controls.TextBox] 上不存在 mono.js:1缺少可绑定属性，并且 MetadataProvider 不知道类型 [Windows.UI.Xaml.UnsetValue]。 .....
你能在 GitHub 上用一个简单的复制应用报告这个吗？ github.com/unoplatform/uno

标签： uno-platform

【解决方案1】：

Uno 目前不支持{x:Bind Mode=TwoWay}。 https://github.com/unoplatform/uno/issues/2587

您可以改为以这种方式编写它作为解决方法：

Text="{Binding LoginModel.Email, Mode=TwoWay, RelativeSource={RelativeSource Self}}"

【讨论】：