zuck.js中HTML Alternate call含义及自定义key失效问题

这是zuck.js支持的两种故事初始化模式之一：

• 常规模式：初始化Zuck实例时，直接在JS配置里传入全量的故事、故事条目结构化数据，库完全基于传入的JS配置渲染所有故事内容
• Alternate call模式：不需要在JS里写全量的故事列表数据，库初始化时会自动解析挂载容器下预先写好的HTML结构，读取标签上的data-*自定义属性，映射成对应的故事配置项生成实例，适合服务端直接渲染故事列表HTML、前端只需要初始化组件的场景。用这个模式时，皮肤、交互开关这类全局配置还是正常在JS初始化参数里传，只省略结构化的stories列表配置即可。

你现在的问题是把两种初始化模式混用了，同时HTML模板没有做实际值渲染，具体修复点如下：

• 先确定你要用哪种模式，不要混写：
  • 如果你用JS传参的常规模式：直接删掉页面里写的.story类名的HTML模板即可，你已经在JS的items配置里写了customKey: "myKey"，库会自动识别这个自定义字段，不需要额外写HTML的data属性。注意要给每个故事、每个故事条目补全全局唯一的id值，你现在id留空会导致状态存储、事件绑定异常。
  • 如果你用Alternate call的HTML读取模式：初始化Zuck实例时移除配置里的stories数组，同时必须把HTML里所有{{storyId}}、{{storyItem.custom-key}}这类模板占位符替换成真实的业务值，静态HTML里留模板语法的话库读到的就是无效的占位字符串，自然无法识别自定义键。注意HTML的data-*属性用短横线命名（比如data-custom-key），库会自动转成驼峰格式的customKey字段，这个映射规则是正确的。
• 自定义键配置完成后，可以在组件的事件回调（比如故事打开、条目点击事件）里，直接从返回的条目对象上读取你配置的自定义字段值。

内容的提问来源于stack exchange，提问作者TheDeveloperFrontend