本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

随着项目的学习以及trailhead的学习,会遇见自己曾经模糊的定义或者比较浪费时间但是又比较简单的坑,在此mark一下,共同进行学习参考。

一.  子组件调用后台实现父组件更改后子组件清除cache更新

我们在开发中经常会出现父子component嵌套的情形。有一种场景为子component使用 lightning-record-form或者使用@getRecord去展示一条数据的详情信息。当父或者兄弟component更新了当前的record的某个字段的值以后,我们需要展示详情的子component也要实时刷新成最新的数据。下面的demo以@getRecord来讲解。

testSon.html:用于展示Account的Industry信息

<template>
{accountIndustry}
</template>

testSon.js:使用getRecord获取当前的数据,这个js中有几个点需要注意:

  • getRecord结果集通过一个变量进行承接,当这个值使用refreshApex方法改变以后,salesforce会自动重新执行getRecord方法获取最新的数据;
  • 针对变量的声明,我们除了可以直接声明外,还可以使用 get / set进行设置。当父组件对这个变量进行更改后,会先调用set方法,然后调用get方法进行返回,set get在项目中的使用尤为重要,一定要有这个概念。
import { LightningElement, wire, track, api } from 'lwc';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import { getRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
export default class TestSon extends LightningElement {
accountCached; @api recordId; refreshFlag = false; @wire(getRecord,{ recordId: '$recordId', fields: [ACCOUNT_INDUSTRY_FIELD]})
wiredRecord(record) {
this.accountCached = record;
const { error, data } = record;
if(data) {
if(data.fields) {
this.accountIndustry = data.fields.Industry.value;
}
} else if(error) {
console.log('execute error');
}
} refreshHandler() {
refreshApex(this.accountCached);
} get needRefresh() {
return this.refreshFlag;
} @api set needRefresh(value) {
if(value) {
refreshApex(this.accountCached);
}
this.refreshFlag = value;
} @track accountIndustry;
}

testParent.html: 嵌入 testSon子组件,旁边放一个button进行逻辑处理。

<template>
<c-test-son need-refresh={needRefresh} record-id={recordId}></c-test-son>
<lightning-button value="refresh" label="refresh" onclick={refreshHandler}></lightning-button>
</template>

testParent.js:refreshHandler执行后会将Industry值清空,然后设置needRefresh为true。

import { LightningElement, track, api } from 'lwc';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import ACCOUNT_ID_FIELD from '@salesforce/schema/Account.Id';
import { updateRecord } from 'lightning/uiRecordApi';
export default class TestParent extends LightningElement {
@api recordId;
@track needRefresh = false;
refreshHandler() {
const fields = {};
fields[ACCOUNT_ID_FIELD.fieldApiName] = this.recordId;
fields[ACCOUNT_INDUSTRY_FIELD.fieldApiName] = '';
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
this.needRefresh = true;
})
.catch(error => {
//TODO
}); } }

所以最终的整体流程为:

1. 初始化展示当前Account数据的Industry的值。

2. 当点击refresh以后,执行updateRecord方法,industry清空,needRefresh设置为true。当needRefresh设置为true以后,会执行testSon的set方法,因为value为true,执行了refreshApex方法,从而getRecord重新执行达到实时刷新效果。

二. JSON与 Map & Object

我们在项目中前后端会经常用到 JSON进行序列化以及反序列化,也经常会用到Map去进行数据操作等等。

Map使用key-value键值对,Object也是用key-value键值对。两者在前后端声明或者使用傻傻分不清楚,特别是前端使用。在这里针对前端使用通过一张官方文档的图进行解释。这个区别目前仅限于前端。

接下来说一下JSON。JSON我们在前端主要使用的方法主要有两个: JSON.stringify以及JSON.parse,即序列化成JSON的字符串和反序列化成我们序列化以前的结构。我们在后台经常用到 Map进行serialize转换,所以我们认为前端仍然可以转换。这里其实有一个误区,后台不是所有的Map都可以JSON进行序列化。因为Map的key可以是任何类型,只有符合下面要求的才可以进行JSON的序列化。

所以我们特别是针对前台进行序列化处理时,尽量少用Map,可以声明Object然后进行序列化处理也同样可以Map的效果。

三. setInterval在LWC中的使用

我们知道JS默认是同步执行,默认的上下文是this。而setInterval是js中的定时器方法,执行方式是异步执行。上下文为当前的windows。这就导致当我们在执行方法时当前this的引用的变量无法在定时器中使用,下图demo中结果永远是1,不会改变。因为initialData的作用域是this,setInterval上下文是windows,无法获取到this的上下文。

针对异步的操作,我们只需要在方法中将this的上下文进行引用赋值,然后使用引用的变量操作即可。

总结:篇中针对用到的不是很难但是很容易出错的知识点进行整理。有错误的地方欢迎指出,有不懂的欢迎留言。

Salesforce LWC学习(十三) 简单知识总结篇一的更多相关文章

  1. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  2. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  3. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  4. Salesforce LWC学习(四十) dynamic interaction 浅入浅出

    本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Light ...

  5. Salesforce LWC学习(二十六) 简单知识总结篇三

    首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 inpu ...

  6. Salesforce LWC学习(三) import & export / api & track

    我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件 ...

  7. Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作.之前的内容中也有提到wire注解,今天就详细的介绍一下对数据进行查询以及DML操作以及Wire S ...

  8. Salesforce LWC学习(四) 父子component交互 / component声明周期管理 / 事件处理

    我们在上篇介绍了 @track / @api的区别.在父子 component中,针对api类型的变量,如果声明以后就只允许在parent修改,son component修改便会导致报错. sonIt ...

  9. Salesforce LWC学习(十五) Async 以及 Picklist 公用方法的实现

    本篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) https://developer.salesfo ...

随机推荐

  1. python&&Java&&jsp+servlet连接数据库报错收藏(sql server,mysql)

    写在最前面:sql server和mysql 是不同的东西... 我在完成java连接数据库的时候把这俩当成一个东西,结果下的mysql的jar包. 但自己的sql是server.. 然后尝试用 py ...

  2. <NOIP2005提高T2>过河の思路

    emm又一道dp dp真有趣(你的良心呢?!!! Description 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一 ...

  3. LeetCode 刷题记录(6-10题)

    6 Z 字形变换(题目链接) class Solution: def convert(self, s, numRows): """ :type s: str :type ...

  4. JavaScript中的document.fullscreenEnabled

    本文主要讲述了: 什么是document.fullscreenEnabled 作用 兼容性 正文 什么是document.fullscreenEnabled document.fullscreenEn ...

  5. create view and switch view

    pageView扩展backbone cAbstractApp定义view加载.切换.回退.跳转-webApp/cWebViewApp/hybirdApp为其子类 1.cWebApp扩展了父类的bin ...

  6. 亚马逊,谷歌,Facebook,IBM和微软:为了AI,是的,我们在一起了

    美国时间9月28日,也就是几个小时前,亚马逊,谷歌,Facebook,IBM和微软宣布成立了一家非盈利组织:人工智能合作组织(Partnership on AI),目标是为人工智能的研究制定和提供范例 ...

  7. Spring源码阅读笔记03:xml配置读取

    前面的文章介绍了IOC的概念,Spring提供的bean容器即是对这一思想的具体实现,在接下来的几篇文章会侧重于探究这一bean容器是如何实现的.在此之前,先用一段话概括一下bean容器的基本工作原理 ...

  8. C++走向远洋——65(十五周、项目一)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. 一起了解 .Net Foundation 项目 No.9

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. DLR/IronPytho ...

  10. NS域名工作原理及解析

    DNS域名工作原理及解析   0x00 定义 DNS( Domain Name System)是“域名系统”的英文缩写,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.D ...