原文鏈接：https://blazor-university.com/components/two-way-binding/

雙向綁定

源代碼^[1]

注意： 如果您還沒(méi)有這樣做過(guò)，請(qǐng)?jiān)诶^續(xù)本節(jié)之前先執(zhí)行單向綁定^[2]中的步驟。

到目前為止，我們有一個(gè)包含嵌入組件的頁(yè)面，并且我們組件的部分狀態(tài)是從其宿主視圖（Counter 頁(yè)面）以名為 CurrentCounterValue 的參數(shù)的形式傳遞的。但是，如果我們還希望組件能夠更新傳遞給它的狀態(tài)呢？

如果您還不熟悉 EventCallback<T> 類，請(qǐng)閱讀組件事件^[3]。理想情況下，您還應(yīng)該熟悉使用 Component 指令^[4]，并且為了更深入地了解綁定變體，您可能還希望熟悉瀏覽器 DOM 事件^[5]。

就像我們對(duì) Counter 頁(yè)面所做的那樣，通過(guò)添加一個(gè)帶有 onclick 事件的按鈕來(lái)更新 CurrentCounterValue 的值。

<div>CurrentCounterValue?in?MyFirstComponent?is?@CurrentCounterValue </div><button?@onclick=UpdateCurrentCounterValue>Update</button>@code?{[Parameter]public?int?CurrentCounterValue?{?get;?set;?}void?UpdateCurrentCounterValue(){CurrentCounterValue++;} }

問(wèn)題在于默認(rèn)情況下 [Parameter] 綁定是單向的。因此， Page.counter 的值將被賦給 MyFirstComponent.CurrentCounterValue ，因?yàn)楦敢晥D明確設(shè)置了它：

<MyFirstComponent?CurrentCounterValue=@currentCount/>

但是，當(dāng) MyFirstComponent 中的屬性發(fā)生更改時(shí)，組件會(huì)設(shè)置其狀態(tài)的本地副本，而不是其父視圖的狀態(tài)。不僅如此，下次父狀態(tài)更新時(shí)，它會(huì)將該值再次賦給 MyFirstComponent.CurrentCounterValue 并替換我們修改的值。

當(dāng)狀態(tài)改變時(shí)通知父組件

要解決此問(wèn)題，我們需要告訴 Blazor 使用組件頁(yè)面想要使用雙向綁定。我們現(xiàn)在告訴 Blazor 綁定（即雙向綁定）到該值，而不是簡(jiǎn)單地設(shè)置 CurrentCounterValue。要對(duì)參數(shù)使用雙向綁定，只需在 HTML 屬性前面加上文本 @bind-。這告訴 Blazor 它不僅應(yīng)該將更改推送到組件，還應(yīng)該觀察組件的任何更改并相應(yīng)地更新自己的狀態(tài)。

<MyFirstComponent?@bind-CurrentCounterValue=currentCount/>

注意： 將代碼值（而不是常量）分配給參數(shù)時(shí)需要 @ 符號(hào)。以前我們的標(biāo)記包含 CurrentCounterValue=@currentCount，但是一旦我們?cè)趨?shù)名稱前加上 @bind - currentCount 之前的 @ 符號(hào)就變得不必要了。

現(xiàn)在運(yùn)行應(yīng)用程序?qū)⒃跒g覽器的控制臺(tái)窗口中顯示以下錯(cuò)誤。

WASM：System.InvalidOperationException：“TwoWayBinding.Client.Components.MyFirstComponent”類型的對(duì)象沒(méi)有與名稱“CurrentCounterValueChanged”匹配的屬性。

Blazor 中的雙向綁定使用命名約定。如果我們想綁定一個(gè)名為 SomeProperty 的屬性，那么我們需要一個(gè)名為 SomeProperyChanged 的事件回調(diào)。每當(dāng)組件更新 SomeProperty 時(shí)，都必須調(diào)用此回調(diào)。

在 MyFirstComponent 中實(shí)現(xiàn)這一點(diǎn)

• 添加 CurrentCounterValueChanged 事件回調(diào)。

• 將 UpdateCurrentCounterValue 方法從 void 更改為 async Task。

• 在增加 CurrentCounterValue 后，調(diào)用 CurrentCounterValueChanged 以通知使用者狀態(tài)已更改。

<div>CurrentCounterValue?in?MyFirstComponent?is?@CurrentCounterValue </div><button?@onclick=@UpdateCurrentCounterValue>Update</button>@code?{[Parameter]public?int?CurrentCounterValue?{?get;?set;?}[Parameter]public?EventCallback<int>?CurrentCounterValueChanged?{?get;?set;?}async?Task?UpdateCurrentCounterValue(){CurrentCounterValue++;await?CurrentCounterValueChanged.InvokeAsync(CurrentCounterValue);} }

工作原理

如果我們打開(kāi) obj\Debug\netstandard2.0\Razor\Pages 中的 Counter.razor.gs 文件，我們可以看到 BuildRenderTree 方法如下所示：

builder.OpenComponent<...MyFirstComponent>(10);builder.AddAttribute(11,?"CurrentCounterValue",?...TypeCheck<System.Int32>(...BindMethods.GetValue(currentCount)) );builder.AddAttribute(12,?"CurrentCounterValueChanged",...TypeCheck<...EventCallback<System.Int32>>(...EventCallback.Factory.Create<System.Int32>(this,...EventCallback.Factory.CreateInferred(this,__value?=>?currentCount?=?__value,currentCount))) ); builder.CloseComponent();

注意： 源代碼已重新格式化，為簡(jiǎn)潔起見(jiàn)，名稱空間已替換為 ...。

• 第 5 行 執(zhí)行從 Counter.currentCount 到 MyFirstComponent.CurrentCounterValue 的單向綁定。

• 第 15 行 每當(dāng)執(zhí)行 MyFirstComponent.CurrentCounterValueChanged 時(shí)，就會(huì)更新 Counter.currentCount。

綁定指令

源代碼^[6]

我們之前介紹了指令^[7]——如果您不熟悉指令，請(qǐng)?jiān)诶^續(xù)之前閱讀有關(guān)它們的部分。

我們之前介紹了指令和指令屬性。在本節(jié)中，我們將通過(guò)演示如何使用雙向綁定來(lái)為指令屬性分配值。

快速回顧一下，指令是元素中以 @ 符號(hào)開(kāi)頭的標(biāo)識(shí)符。例如

<h1?@ref=OurReferenceToThisElement>Hello</h1>

指令屬性是以 @directive:attribute 形式提供給指令的附加信息。例如，應(yīng)用于 @onclick 指令的 preventDefault 屬性會(huì)阻止提交按鈕實(shí)際提交表單。

<input?type="submit"?@onclick:preventdefault>

除此之外，還可以通過(guò)以下形式為某些指令屬性賦值：

<h1?@directive:attribute="someValue">Hello</h1>

盡管沒(méi)有理由特別將這些屬性值限制為雙向綁定，但碰巧的是，目前 Blazor 框架中唯一使用此功能的地方恰好是雙向綁定，這就是本節(jié)放在雙向綁定部分下方的原因。

入門

注意： 盡管為了簡(jiǎn)單起見(jiàn)，我們將在此處使用 HTML <input> 元素，但為了獲得更豐富的用戶體驗(yàn)（添加驗(yàn)證等），我建議在 <EditForm> 組件中使用 Blazor <Input*> 組件（InputDate 等）。這些在表單^[8]一節(jié)中介紹。

首先，我們需要一個(gè)在 @code 部分中定義了以下成員的頁(yè)面，因此我們需要綁定一些內(nèi)容：

@code {private?string?Name;private?DateTime??DateOfBirth;private?decimal??BankBalance; }

標(biāo)準(zhǔn)雙向綁定

首先，我們將從標(biāo)準(zhǔn)雙向綁定到 Blazor 頁(yè)面的 Name 成員開(kāi)始。

<label>Name?=?@Name</label> <input?@bind-value=Name/>

前面標(biāo)記的重要部分是 @bind-value=Name。這將為 <input> 元素上名為 value 的 HTML 屬性設(shè)置雙向綁定，并將其綁定到 Name 成員。

如果我們現(xiàn)在運(yùn)行我們的應(yīng)用程序，我們將看到上方的 Name = @Name 文本不會(huì)更改以反映我們?cè)?<input> 中鍵入的內(nèi)容，直到輸入元素失去焦點(diǎn)或我們按下 Enter 鍵。

使用指令屬性立即檢測(cè)變化

@bind 指令有一個(gè)名為 event 的指令屬性。設(shè)置此指令形式的值采用以下格式：

<input?@bind-value:event="x"/>

“x”的有效值是 onchange 或 oninput。

當(dāng)沒(méi)有指定 :event 的值時(shí)，onchange 是假定的默認(rèn)值。這是我們?cè)谶\(yùn)行示例時(shí)看到的行為——綁定僅在控件失去焦點(diǎn)或用戶按下回車鍵時(shí)發(fā)生。

oninput 是 :event 的唯一其他可能值，它指示 Blazor ?hook 到 HTML 元素的 JavaScript oninput 事件，并在每次觸發(fā)事件時(shí)更新綁定成員。這會(huì)導(dǎo)致每次用戶更改輸入中的值時(shí)立即更新綁定成員。

注意： -value 是要綁定到的 HTML 屬性或 Blazor 組件屬性的名稱。對(duì)于 HTML 元素，前導(dǎo)字母為小寫，對(duì)于組件屬性，前導(dǎo)字母為大寫，指令名稱和綁定目標(biāo)名稱由 - 符號(hào)分隔。

將以下標(biāo)記添加到我們的頁(yè)面并運(yùn)行應(yīng)用程序。

<label>Name?=?@Name</label> <input?@bind-value=Name?@bind-value:event="oninput"/>

@bind-value:event="oninput" 是指示 Blazor 使用即時(shí)更改檢測(cè)的關(guān)鍵。首先我們告訴 Blazor 我們要將輸入框的 value HTML 屬性綁定到我們的 Name 成員 (@bind-value=Name)，然后我們告訴 Blazor hook 到 HTML 元素的 oninput 事件，這樣每次綁定都會(huì)立即發(fā)生元素的值發(fā)生變化（@bind-value:event="oninput"）。

*** 指定自定義綁定格式 通過(guò)為 @bind 指令的格式屬性指定一個(gè)值來(lái)指定在用戶界面中使用的自定義格式。

將以下標(biāo)記添加到我們的頁(yè)面并運(yùn)行應(yīng)用程序。

<label>Date?of?birth?=?@DateOfBirth?.ToString("MMMM?d,?yyyy")</label> <input?@bind-value=DateOfBirth?@bind-value:format="yyyy-MM-dd"/>

當(dāng)應(yīng)用程序運(yùn)行時(shí)，輸入 ISO 格式的日期（例如 1969-07-21）。雖然日期在 <label> 中顯示為 July 21, 1969，但 <input> 控件以我們?cè)?@bind-value:format="yyyy-MM-dd" 中指定的 ISO 顯示它。

注意： 輸入的任何與指定格式不匹配的值都將被丟棄。因此，我們不能設(shè)置 @bind-value:event="oninput"，因?yàn)?Blazor 會(huì)嘗試在每次按鍵時(shí)解析輸入，但輸入的值不可能在單次按鍵后有效，因此輸入值將干脆消失。這是我建議在編輯數(shù)據(jù)時(shí)在 EditForm^[9] 中使用 Blazor <Input*> 組件的原因之一，因?yàn)檫@使我們能夠使用諸如 <InputDate> 之類的組件。

如 Descending from InputBase^[10] 部分所述，Blazor 輸入組件具有一對(duì)互補(bǔ)的受保護(hù)方法，用于將綁定值轉(zhuǎn)換為字符串和從字符串轉(zhuǎn)換為字符串。

工作原理

@bind 指令不會(huì)添加代碼來(lái)直接綁定到我們的成員，而是簡(jiǎn)單地將其轉(zhuǎn)換為字符串值/從字符串值轉(zhuǎn)換。相反，它通過(guò) BindConverter 重定向當(dāng)前值的表示和輸入值的解析。

如果我們查看 Blazor 為單向綁定（例如 class=@OurCssClass）生成的 .cs 文件，我們會(huì)看到 C# 看起來(lái)像這樣（為簡(jiǎn)潔起見(jiàn)進(jìn)行了編輯）。

protected?override?void?BuildRenderTree(RenderTreeBuilder?__builder) {_builder.AddAttribute(1,?"class",?OurCssClass); }

現(xiàn)在，如果我們查看生成的雙向綁定文件，我們將看到類似于以下（有刪減）代碼的內(nèi)容，用于顯示該值：

protected?override?void?BuildRenderTree(RenderTreeBuilder?__builder) {_builder.AddAttribute(1,?"value",...BindConverter.FormatValue(Name));

以及類似于以下（有刪減）代碼，用于將用戶輸入轉(zhuǎn)換回綁定成員。

__builder.AddAttribute(11,?"onchange",...EventCallback.Factory.CreateBinder(this,?__value?=>?Name?=?__value,?Name)); }

代碼 hook 到 HTML onchange 事件，然后在事件觸發(fā)時(shí)設(shè)置我們的成員值。

設(shè)置 @bind-value:format 指令屬性值時(shí)的不同之處在于我們提供的格式在生成的代碼中傳遞給了 BindConverter.Format 和 EventCallback.Factory.CreateBinder。

...BindConverter.FormatValue(Name,?format:?"yyyy-MM-dd"); //?and CreateBinder(....,?format:?"yyyy-MM-dd");

指定自定義 culture

世界上的人們有不同的習(xí)俗和文化，這是使世界變得如此有趣的原因之一。不幸的是，這也是使編寫軟件更加困難的原因之一。

將以下標(biāo)記添加到我們的頁(yè)面：

<label>Bank?balance?=?@BankBalance</label> <input?@bind-value=BankBalance?@bind-value:culture=Turkish/>

并確保將以下成員添加到 @code 部分的頁(yè)面中：

private?CultureInfo?Turkish?=?CultureInfo.GetCultureInfo("tr-TR");

輸入值 12.42 可能會(huì)期望余額超過(guò) 12 土耳其里拉，但正如我們所見(jiàn)，我們只是不小心給了某人 1,242 土耳其里拉。當(dāng)然，居住在土耳其的人會(huì)知道要輸入 12,42，但這凸顯了當(dāng)我們的應(yīng)用程序打算在其他國(guó)家/地區(qū)使用時(shí)正確指定文化的必要性。

與 format 指令屬性一樣，指定的 @bind-value:culture 將作為命名（可選）值傳遞給 Binder 和 BindConverter。

如果您還沒(méi)有聽(tīng)說(shuō)過(guò)土耳其測(cè)試，那么我建議您閱讀這篇優(yōu)秀的文章^[11]。

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/TwoWayBinding

[6]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/BindingDirectives

[11]

這篇優(yōu)秀的文章: http://www.moserware.com/2008/02/does-your-code-pass-turkey-test.html

總結(jié)

以上是生活随笔為你收集整理的Blazor University （7）组件 — 双向绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。