update examples for new API

Author: mProjectsCode

exampleVault/Advanced Examples/Using JS Engine for Complex things.md

@@ -1,53 +1,71 @@
 ---
-text: aasdasd
-locked: false
+text: abcasdasd
+locked: true
 ---
 
 Locked: `INPUT[toggle:locked]`
 ```js-engine
 const mb = engine.getPlugin('obsidian-meta-bind-plugin').api;
-
-const signal = mb.createSignal(undefined);
-
-component.register(mb.listenToMetadata(signal, context.file.path, ['locked']));
-
+// a component for lifecycle management of the fields created in our render function
 const comp = new obsidian.Component(component);
 
-function render() {
+// create a bind target to the property that we care about
+const bindTarget = mb.bindTargetParser.fromStringAndValidate('locked', context.file.path);
+
+// the render function, it takes the locked value as the argument
+function render(value) {
+	// first we unload the component to unload the content from the previous rerender
 	comp.unload();
+	// then we load the component again for this rerender.
 	comp.load();
+	// then we empty the element we render to to remove content created in the previous rerender
 	container.empty();
+
+	// next we create the field based on the locked value
 	let field;
-	if (signal.get()) {
+	if (value) {
 		field = mb.createInlineFieldFromString("VIEW[{text}][text]", context.file.path, undefined);
 	} else {
 		field = mb.createInlineFieldFromString("INPUT[text:text]", context.file.path, undefined);
 	}
+
+	// and finally we render that field
 	mb.wrapInMDRC(field, container, comp);
 }
 
-const reactive = engine.reactive(render);
-signal.registerListener({
-	callback: () => reactive.refresh(),
-});
+// we create a reactive component from the render function and the initial value will be the value of the bind target
+const reactive = engine.reactive(render, mb.getMetadataWithBindTarget(bindTarget));
+
+// then we subscribe to the metadata that the bind target points to and rerender the reactive component everythime the bind target value changes
+const subscription = mb.subscribeToMetadataWithBindTarget(
+	bindTarget,
+	(value) => reactive.refresh(value)
+);
+
+// don't forget to unregister the subscription when this code block unloads
+component.register(() => subscription.unsubscribe());
 
 return reactive;
 ```
 
 ```js-engine
 const mb = engine.getPlugin('obsidian-meta-bind-plugin').api;
 
-const signal = mb.createSignal(undefined)
-component.register(mb.listenToMetadata(signal, context.file.path, ['text']))
-
 function onUpdate(value) {
-	return value.toString()
+	return value.toString();
 }
 
-const reactive = engine.reactive(onUpdate, signal.get())
-signal.registerListener({
-	callback: (v) => reactive.refresh(v),
-})
+const reactive = engine.reactive(onUpdate, context.metadata.frontmatter.text);
+
+const subscription = mb.subscribeToMetadata(
+	'frontmatter',
+	context.file.path, 
+	['text'], 
+	false, 
+	(value) => reactive.refresh(value)
+);
+
+component.register(() => subscription.unsubscribe());
 
 return reactive;
 ```

exampleVault/Buttons/Replace Buttons.md

@@ -1,8 +1,8 @@
 ### Two buttons that replace the same text
 
-some
+other
 text
-wow
+tada
 
 ```meta-bind-button
 label: Replace in Note

exampleVault/Buttons/Templater Buttons.md

@@ -1,7 +1,3 @@
-Templater Buttons
-Templater Buttons
-Templater Buttons
-
 
 ```meta-bind-button
 label: Insert Text
@@ -11,8 +7,7 @@ tooltip: ""
 id: ""
 style: default
 action:
-  type: "insertIntoNote"
-  line: 1
-  value: "templates/templater/Templater Template.md"
+  type: "replaceSelf"
+  replacement: "templates/templater/Templater Template.md"
   templater: true
 ```