原文链接:https://blazor-university.com/components/render-trees/incremental-rendertree-proof/
增量渲染树证明
源代码[1]
为了证明 Blazor 更新了现有的浏览器 DOM 元素,我们将创建一些 JavaScript,这些 JavaScript 将采用 Blazor 生成的元素并以 Blazor 不知道的方式更新它们。然后,我们将让 Blazor 更新其视图并观察 JavaScript 更改并没有丢失。
创建一个默认应用,然后在 /Pages/Index.razor 中进行以下更改:
-
添加具有一些初始值的
List<string>
成员。 -
添加一些标记以呈现该列表的值。
-
添加一个按钮,单击该按钮将调用 C
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<button @onclick=@ChangeData>Change data</button>
<ol>
@foreach(string item in Items)
{
<li>@item</li>
}
</ol>
<SurveyPrompt Title="How is Blazor working for you?" />
@code {
List<string> Items = new List<string> { "One", "Two", "3" };
void ChangeData()
{
Items[0] = "1";
Items[1] = "2";
Items.Add("4");
}
}
显示列表值的主页
现在我们有了一些 Blazor 生成的元素,我们需要使用一些 JavaScript 来更改这些元素。编辑 /wwwroot/index.html,在开始的 <body>
元素内添加一个按钮,在结束的 </body>
上方添加对 jQuery 的引用和一些脚本来更新现有的<li>
元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>MyFirstBlazorApp</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<button id="setValues">Set values</button>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function () {
$('
- 第 12 行在 HTML 中添加了一个按钮。
- 第 17 行引用了 jQuery。
- 第 21 行添加了一个脚本,该脚本查找所有
<li>
元素,获取它们的当前文本,然后将其分配给名为 originalValue
的新属性。
运行应用程序,然后右键单击页面上的第一个 <li>
元素并检查它。最初,元素将如下所示:
<ol>
<li>One</li>
<li>Two</li>
<li>3</li>
</ol>
接下来单击页面顶部的新设置值按钮,这将执行 JavaScript 为每个 <li>
添加一个新属性以记录它帮助的原始文本。
带有新设置值按钮的主页
您现在应该看到浏览器的元素检查器中的元素更改为以下内容:
<ol>
<li originalValue="One">One</li>
<li originalValue="Two">Two</li>
<li originalValue="3">3</li>
</ol>
最后,单击更改数据按钮。这将执行 C
<ol>
<li originalValue="One">1</li>
<li originalValue="Two">2</li>
<li originalValue="3">3</li>
<li>4</li>
</ol>
- 带有文本“One”的项目的文本更改为“1”。
- 带有文本“Two”的项目的文本更改为“2”。
- 带有文本“3”的项目保持不变。
- 添加带有文本“4”的新项目。
我们可以看到现有元素被重用,因为元素的 originalValue
属性不是由 Blazor 生成的,但它们仍然存在。由 Blazor 新创建的新元素没有 originalValue
属性。
参考资料
[1]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/RenderTrees/IncrementalRenderTreeProof
阅读原文
《Blazor University (15)渲染树 — 增量渲染树证明》来自互联网公开内容,收录仅供学习使用,如侵权请联系删除。本文URL:https://www.ezixuan.com/1020481.html