If you're looking to update your own FE components when the EPI UX updates something, or re-renders a section, I think you're going to need to subscribe to the contentSaved event to listen to the changes. When the Dojo Widget used for editing on the front-end updates it's not firing off a bunch of back-end code, it updates the FE models and saves the block data to the back-end separately.
Some info on this can be found here:
https://world.episerver.com/documentation/developer-guides/CMS/editing/#dataevents
And
https://tedgustaf.com/blog/2017/episerver-on-page-edit-with-angular-react-and-other-js-frameworks/#some-background-on-property-rendering-in-episerver
There's also a slightly outdated Alloy example that updates React components on changes to the DOM, which are fired off from saving a component.
https://github.com/episerver/AlloyReact
and
https://github.com/episerver/AlloyReact/blob/master/AlloyReact/Static/react/ThreeKeyFacts.jsx
I have an episerver Quicksilver-master project implemented with REACT
Not sending htmlrazor properties to REACT component
in content areas you can add different types of blocks,
example:
in a type of page we have
ContentArea Company
in Company we add the car block
and the Computer block
the car block has the property of textBox number of wheels = 4
and the block computer has the text box property of the number of screens
Now comes the question, how can I send from a door number blades html to the car block controller?
public class CompanyBlockViewModel
{
public ContentArea MainContentArea { get; set; }
}
public class CarBlock : BlockData
{
[CultureSpecific]
[Display(
Name = @"....",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual string NumberWheels { get; set; }
}
public class CarBlockViewModel
{
public string NumberWheels { get; set; }
public string NumberDoors { get; set; }
}
public class ComputerBlock : BlockData
{
[CultureSpecific]
[Display(
Name = @"....",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual string NumberScreens { get; set; }
}
public class ComputerBlockViewModel
{
public string NumberScreens { get; set; }
public string SOname { get; set; }
}
in views
Company -> index.cshtml
<div id="CompanyPage" data-props="@SerializeToJsonHelper.SerializeToJson(Model)" />
@Html.PropertyFor(x => x.MainContentArea)
<div id="ContentPageHide" style="display: none;">
<span id="NumberDoors">4</span>
<span id="SOname"></span>
</div>
How do I send Number Screens?
to the react component