singe quote > double quote
This commit is contained in:
parent
83ba66afa4
commit
e72196cb34
46
src/Mite.js
46
src/Mite.js
|
@ -50,7 +50,7 @@ export class Mite {
|
|||
this.bindings.clear();
|
||||
|
||||
const fragment = this.template.cloneNode(true);
|
||||
this.root.innerHTML = '';
|
||||
this.root.innerHTML = "";
|
||||
this.root.appendChild(fragment);
|
||||
|
||||
this.scanAndBind(this.root);
|
||||
|
@ -64,7 +64,7 @@ export class Mite {
|
|||
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
|
||||
let node;
|
||||
while ((node = walker.nextNode())) {
|
||||
if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('{')) {
|
||||
if (node.nodeType === Node.TEXT_NODE && node.textContent.includes("{")) {
|
||||
const matches = node.textContent.match(/{(\w+)}/g);
|
||||
if (matches) {
|
||||
matches.forEach(token => {
|
||||
|
@ -73,7 +73,7 @@ export class Mite {
|
|||
if (!this.bindings.has(key)) this.bindings.set(key, []);
|
||||
const updateFn = () => this.update(key);
|
||||
const unsubscribe = this.state[key].subscribe(updateFn);
|
||||
this.bindings.get(key).push({ node, type: 'text', original: node.textContent, unsubscribe });
|
||||
this.bindings.get(key).push({ node, type: "text", original: node.textContent, unsubscribe });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -81,7 +81,7 @@ export class Mite {
|
|||
for (const attr of node.attributes) {
|
||||
const matches = attr.value.match(/{(\w+)}/g);
|
||||
if (matches) {
|
||||
if (attr.name.startsWith('@')) {
|
||||
if (attr.name.startsWith("@")) {
|
||||
const eventName = attr.name.slice(1);
|
||||
const methodName = attr.value.slice(1, -1);
|
||||
if (this.methods[methodName]) {
|
||||
|
@ -94,25 +94,25 @@ export class Mite {
|
|||
if (!this.bindings.has(key)) this.bindings.set(key, []);
|
||||
const updateFn = () => this.update(key);
|
||||
const unsubscribe = this.state[key].subscribe(updateFn);
|
||||
this.bindings.get(key).push({ node, type: 'attr', attrName: attr.name, original: attr.value, unsubscribe });
|
||||
this.bindings.get(key).push({ node, type: "attr", attrName: attr.name, original: attr.value, unsubscribe });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rif = node.getAttribute('r-if');
|
||||
const rif = node.getAttribute("r-if");
|
||||
if (rif && rif.match(/{(\w+)}$/)) {
|
||||
const key = rif.slice(1, -1);
|
||||
if (this.state[key]) {
|
||||
if (!this.bindings.has(key)) this.bindings.set(key, []);
|
||||
const updateFn = () => this.update(key);
|
||||
const unsubscribe = this.state[key].subscribe(updateFn);
|
||||
this.bindings.get(key).push({ node, type: 'if', unsubscribe });
|
||||
this.bindings.get(key).push({ node, type: "if", unsubscribe });
|
||||
}
|
||||
}
|
||||
|
||||
const reach = node.getAttribute('r-each');
|
||||
const reach = node.getAttribute("r-each");
|
||||
if (reach) {
|
||||
const match = reach.match(/{(.+?)}/);
|
||||
if (!match) {
|
||||
|
@ -121,7 +121,7 @@ export class Mite {
|
|||
}
|
||||
const content = match[1];
|
||||
|
||||
const parts = content.split(' in ');
|
||||
const parts = content.split(" in ");
|
||||
if (parts.length !== 2) {
|
||||
console.error(`Invalid r-each split on " in ": ${content}, parts: ${parts}`);
|
||||
continue;
|
||||
|
@ -130,7 +130,7 @@ export class Mite {
|
|||
|
||||
names = names.trim();
|
||||
listName = listName.trim();
|
||||
const nameParts = names.split(',').map(part => part.trim());
|
||||
const nameParts = names.split(",").map(part => part.trim());
|
||||
const itemName = nameParts[0];
|
||||
const indexName = nameParts.length > 1 ? nameParts[1] : undefined;
|
||||
|
||||
|
@ -140,7 +140,7 @@ export class Mite {
|
|||
const unsubscribe = this.state[listName].subscribe(updateFn);
|
||||
this.bindings.get(listName).push({
|
||||
node,
|
||||
type: 'each',
|
||||
type: "each",
|
||||
itemName,
|
||||
indexName,
|
||||
unsubscribe,
|
||||
|
@ -158,30 +158,30 @@ export class Mite {
|
|||
update(key) {
|
||||
const bindings = this.bindings.get(key) || [];
|
||||
bindings.forEach(binding => {
|
||||
// Remove the parentNode check for 'each' bindings since we use parentSelector
|
||||
// Remove the parentNode check for "each" bindings since we use parentSelector
|
||||
if (!binding.node) return;
|
||||
|
||||
switch (binding.type) {
|
||||
case 'text':
|
||||
case "text":
|
||||
if (!binding.node.parentNode) return;
|
||||
binding.node.textContent = binding.original.replace(/{(\w+)}/g, (_, k) => {
|
||||
return this.state[k] ? this.state[k].value : `{${k}}`;
|
||||
});
|
||||
break;
|
||||
|
||||
case 'attr':
|
||||
case "attr":
|
||||
if (!binding.node.parentNode) return;
|
||||
binding.node.setAttribute(binding.attrName, binding.original.replace(/{(\w+)}/g, (_, k) => {
|
||||
return this.state[k] ? this.state[k].value : `{${k}}`;
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'if':
|
||||
case "if":
|
||||
if (!binding.node.parentNode) return;
|
||||
binding.node.style.display = this.state[key].value ? '' : 'none';
|
||||
binding.node.style.display = this.state[key].value ? "" : "none";
|
||||
break;
|
||||
|
||||
case 'each': {
|
||||
case "each": {
|
||||
const parent = this.root.querySelector(binding.parentSelector);
|
||||
if (!parent) {
|
||||
console.error(`Parent node (${binding.parentSelector}) not found for r-each="${binding.originalReach}"`);
|
||||
|
@ -194,15 +194,15 @@ export class Mite {
|
|||
}
|
||||
const items = this.state[key].value || [];
|
||||
|
||||
parent.innerHTML = '';
|
||||
parent.innerHTML = "";
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const clone = template.cloneNode(true);
|
||||
clone.removeAttribute('r-each');
|
||||
clone.removeAttribute("r-each");
|
||||
const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
|
||||
let textNode;
|
||||
while ((textNode = walker.nextNode())) {
|
||||
if (textNode.textContent.includes('{')) {
|
||||
if (textNode.textContent.includes("{")) {
|
||||
textNode.textContent = textNode.textContent.replace(/{(\w+)}/g, (_, k) => {
|
||||
if (k === binding.itemName) return item;
|
||||
if (k === binding.indexName) return index;
|
||||
|
@ -210,13 +210,13 @@ export class Mite {
|
|||
});
|
||||
}
|
||||
}
|
||||
const eventElements = clone.querySelectorAll('[\\@click]');
|
||||
const eventElements = clone.querySelectorAll("[\\@click]");
|
||||
eventElements.forEach(el => {
|
||||
const clickAttr = el.getAttribute('@click');
|
||||
const clickAttr = el.getAttribute("@click");
|
||||
if (clickAttr && clickAttr.match(/{(\w+),\s*(\w+)}/)) {
|
||||
const [, methodName, param] = clickAttr.match(/{(\w+),\s*(\w+)}/);
|
||||
if (this.methods[methodName] && param === binding.indexName) {
|
||||
el.addEventListener('click', (e) => this.methods[methodName](e, index));
|
||||
el.addEventListener("click", (e) => this.methods[methodName](e, index));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue