本篇参考:
https://developer.salesforce.com/docs/platform/lwc/guide/data-refreshview.html
https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-refreshview.html
https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007KX6dASAT
我们在前篇中讲述了两种标准页面更新的情况下,自定义页面如何捕捉以及如何操作Salesforce LWC学习(四十七) 标准页面更新以后自定义页面如何捕捉?
随着lwc的更新,我们同样可以通过 refreshView来进行捕捉和自定义组件的更新。
RefreshView API简单介绍
我们直接看一下例子然后进行一下分解:
RefreshViewSampleController: 方法用于获取Account的信息
public with sharing class RefreshViewSampleController { @AuraEnabled(cacheable=false) 服务器托管网 public static Account getAccount(String recordId) { Account accountItem = [SELECT Name,Industry,Phone from Account where Id = :recordId limit 1]; system.debug(accountItem); return accountItem; } }
refreshViewSample.html:显示Account的Name
template>
{accountName}
template>
refreshViewSample.js: 用来获取Account信息,赋值Account Name以及注册和解除注册 RefreshHandler。这里我服务器托管网们细节的分析一下。
1. 头部需要引入必要的方法。import {registerRefreshHandler,unregisterRefreshHandler} from “lightning/refresh”; 用来注册/取消注册在refresh process中的refresh handler.
2. connectedCallback来注册refreshHandler。该方法有两个参数。
-
contextElement
—(Required) 一个html element代表参与在刷新流程中的container,通常可以用this。 -
providerMethod
—(Required)一个函数,用于标识刷新过程开始时要调用的回调函数。 处理程序回调需要返回一个代表其特定元素的刷新状态的 Promise。
3. disconnectedCallback来取消refreshHandler。
这里我们看一下第16行的注释。如果当前的org启用了lws,则使用目前的代码,如果当前的org没有启用lws,使用了lightning locker,则打开16行的注释并且将14行注释。
1 import { LightningElement, track, wire, api } from "lwc"; 2 import getAccount from "@salesforce/apex/RefreshViewSampleController.getAccount"; 3 import { 4 registerRefreshHandler, 5 unregisterRefreshHandler 6 } from "lightning/refresh"; 7 export default class refreshViewSample extends LightningElement { 8 accountName; 9 refreshHandlerID; 10 @api recordId; 11 12 connectedCallback() { 13 // Session Setting --> Use Lightning Web Security for Lightning web components and Aura components 14 this.refreshHandlerID = registerRefreshHandler(this, this.refreshHandler); 15 // if the component runs in an org with Lightning Locker instead of LWS, use 16 // this.refreshHandlerID = registerRefreshHandler(this.template.host, this.refreshHandler.bind(this)); 17 this.retrieveAccount(); 18 } 19 20 disconnectedCallback() { 21 unregisterRefreshHandler(this.refreshHandlerID); 22 } 23 24 refreshHandler() { 25 return new Promise((resolve) => { 26 this.retrieveAccount(); 27 resolve(true); 28 }); 29 } 30 31 retrieveAccount() { 32 getAccount({ recordId: this.recordId }) 33 .then((result) => { 34 this.accountName = result.Name; 35 }) 36 .catch((error) => { 37 console.log("execute error"); 38 }); 39 } 40 }
效果展示:
除这种system/app-trigger以外,还可以是两个组件间的触发方式。比如一个组件去this.dispatchEvent(new RefreshEvent()); 另外一个组件进行注册以及处理。这种场景不在本篇的范围,感兴趣的小伙伴可以自行尝试。
总结:篇中通过一个demo来介绍RefreshView API的两个方法以及所可以达到的标准页面更新,自定义组件进行捕捉的demo。使用这个功能需要启用 lightning locker或者lightning web security,此api还有一些其他的方法以及一些限制没有讲,只是抛砖引玉,感兴趣的小伙伴可以自行查看文档。篇中有错误地方欢迎指出,有不懂欢迎留言。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: Taurus.MVC WebMVC 入门开发教程4:数据列表绑定List
前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第四篇文章中, 我们将学习如何实现数据列表的绑定,通过使用 List 来展示多个数据项。 我们将继续使用 Taurus.Mvc 命名空间,同时探讨如何在视图中绑定并显示一个 Model 列表。 …