Я начинаю создавать веб-компонент освещения, следуя примеру Hello World. Я настроил среду Sandbox и авторизовал организацию в VS Code. Я настроил проект с манифестом и получил манифест из организации с помощью SFDX. Затем я создал LWC и настроил 3 файла и соответственно.

.html

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}
      ></lightning-input>
    </div>
  </lightning-card>
</template>

.js

import { LightningElement } from "lwc";
export default class HelloWorld extends LightningElement {
  greeting = "World";
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}

.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Которые просто вырезаны и вставлены из примеров. Они хорошо видны на игровой площадке (хотя файл xml не требуется.

Моя проблема заключается в том, что когда я развертываю код в Salesforce, а затем визуализирую компонент, у него нет html под элементом компонента.

[Из инструментов разработчика Chrome]

<div data-component-id="helloWorld" data-aura-rendered-by="637:0" class="flexipageComponent" data-aura-class="flexipageComponent">
<c-hello-world data-data-rendering-service-uid="227" data-aura-rendered-by="639:0"></c-hello-world>
</div>

Я немного застрял, как это отладить, кажется, код не отображается должным образом. Я был бы признателен за некоторые рекомендации о том, как атаковать эту проблему.

0
sfdcfox 29 Мар 2020 в 06:48
1
Это странно. Я скопировал это в свой код VS, добавил в приложение Lightning, и оно правильно отображается (и работает, как и ожидалось). Попробуйте создать чистую организацию или попробуйте другую организацию и посмотрите, сохраняется ли эта проблема. Если хотите, я могу сделать вам суть с моими точными файлами.
 – 
sfdcfox
29 Мар 2020 в 06:53
Как вы пытались визуализировать компонент? Компонент работает, как и ожидалось, и виден в DOM, когда я пытался.
 – 
SfdcBat
29 Мар 2020 в 06:53
Я добавил его в конструкторе страниц Visual Force на стандартную страницу продаж. Компонент отображает пустой элемент html как в веб-дизайнере, так и на фактической странице.
 – 
wbm
29 Мар 2020 в 07:14

2 ответа

Я попробовал код, который вы разместили в вопросе, попробовал, он работает для меня.

Html:

   <template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
  <div class="slds-m-around_medium">
    <p>Hello, {greeting}!</p>
    <lightning-input
      label="Name"
      value={greeting}
      onchange={changeHandler}
    ></lightning-input>
  </div>
</lightning-card>

Js :

 import { LightningElement } from "lwc";
 export default class Greeting extends LightningElement {
    greeting = "World";
    changeHandler(event) {
      this.greeting = event.target.value;
    }
}

Выход:

enter image description here

Если я проверю вашу ошибку, которую вы опубликовали

  <div data-component-id="helloWorld" data-aura-rendered-by="637:0" class="flexipageComponent" data-aura-class="flexipageComponent">
  <c-hello-world data-data-rendering-service-uid="227" data-aura-rendered-by="639:0"></c-hello-world>

Почему эти компоненты с ошибкой обозначения регистра Kebab "c-hello-world"? кажется, вы написали неправильную ошибку

0
SFDCLearner 29 Мар 2020 в 07:18
 – 
SfdcBat
29 Мар 2020 в 06:54
Это острое наблюдение, но проблема не в этом. Он отлично отображается в моей организации.
 – 
sfdcfox
29 Мар 2020 в 06:56
О, это сладкая находка! Я задавался вопросом, почему это сработало :p
 – 
sfdcfox
29 Мар 2020 в 06:56
Спасибо @sfdcbat.
 – 
SFDCLearner
29 Мар 2020 в 06:58
Событие, я пробовал тот же код, для меня это не проблема. Я только что обновил ответ
 – 
SFDCLearner
29 Мар 2020 в 07:13

Полный нубский вопрос. Я не сохранил все в VS Code, и он отправлял пустой html-файл.

Ну что ж, единственный путь вверх.

Было бы неплохо понять, есть ли способ просмотра файлов на сервере.

0
wbm 29 Мар 2020 в 09:32