如何在多个 x 数据传播中使用 init()？答案

【问题标题】：How to use init() in multiple x-data spreads?如何在多个 x 数据传播中使用 init()？
【发布时间】：2022-10-05 13:16:13
【问题描述】：

我已经将我的方法分成两个函数，放在一个单独的 JS 文件中。两部分都需要x-init，但只触发了第二部分的init()方法：

<div
    x-data=\"{
        ...part1(),
        ...part2(),
    }\">
    <p>Check the console</p>
</div>

document.addEventListener(\'alpine:init\', () => {
    Alpine.data(\'part1\', () => ({
        init(){
            // Not triggered
            console.log(\"Part 1 init\");
        }
    })
)});

document.addEventListener(\'alpine:init\', () => {
    Alpine.data(\'part2\', () => ({
        init(){
            console.log(\"Part 2 init\");
        }
    })
)});

Codepen

我们可以在一个x-data 中有两个init()s 吗？

标签： alpine.js

【解决方案1】：

如果可以选择，这里最简单的解决方案是使用两个单独的 DOM 元素：

<div x-data="part1()">
  <div x-data="part2()">
    <p>Check the console</p>
  </div>
</div>

但是，我知道这可能是不可取的。

由于object spread operator 的工作方式，您来自part1 的init 方法正在被part2 的init 方法覆盖，而AlpineJS 甚至还没有看到它。如果您打算做很多这种类型的合并数据对象，您可能会考虑编写一个帮助程序，例如：

Alpine.magic('merge', (...inputs) => inputs.reduce((state, next) => {
  const prevInit = typeof state.init === 'function' ? state.init : () => {};
  return {
    ...state,
    ...next,
    init() {
      prevInit.call(this);
      next.init.call(this);
    }
  };
}, {});


<div x-data="$merge(part1(), part2())">...</div>

根据您正在做的事情，您可能会考虑将其写为指令。至少从 Alpine v3 开始，只要有命名空间，就可以添加多个 x-init 指令。例如：

<span x-init.foo="console.log('foo')" x-init.bar="console.log('bar')"></span>

您可以将其实现为：

document.addEventListener("alpine:init", () => {
  Alpine.directive('part1', (el, {expression}) => {
    Alpine.bind(el, {
      ['x-init.part1']() {
        console.log('part 1 init');
      }
    })
  });
  Alpine.directive('part2', (el, {expression}) => {
    Alpine.bind(el, {
      ['x-init.part2']() {
        console.log('part 2 init');
      }
    })
  });
});

不过，您可能最终会遇到使用这种方法的问题。一般来说，越简单越好。

【讨论】：