如何访问嵌套的模板属性? [英] How to access nested template attributes?

问题描述

我使用 quill wysiwyg 成功实现了一个表单，但现在我想创建一个组件来重用它.这是我的工作实现:

I successfully implemented a form with quill wysiwyg but now I want to create a component to reuse it. This is my working implementation:

<template name="form">
  <form>
    <div id="toolbar"> ... html with toolbar buttons </div>
    <div id="editor"></div>
    <input type="submit" value="save"/>
  </form>
</template>

Template.form.rendered = function () {
  this.quill = new Quill('#editor', { 
    modules: {
     'toolbar': { container: '#toolbar' },
     'link-tooltip': true
    },
    theme: 'snow' }
  );
}

Template.form.events({
  'submit form': function(e, tmpl) {
    e.preventDefault();
    var html = tmpl.quill.getHTML();
    // code to save the form data
}

这就是我想让它可重用的原因.我的问题在代码中:

This is what I want to make it reusable. My questions are inside the code:

<template name="form">
  <form>
    {{> editor }}
    <input type="submit" value="save"/>
  </form>
</template>

<template name="editor">
  <div id="toolbar"> ... html with toolbar buttons </div>
  <div id="editor"></div>
</template>

Template.editor.rendered = function () {
  this.quill = new Quill('#editor', { 
    modules: {
     'toolbar': { container: '#toolbar' },
     'link-tooltip': true
    },
    theme: 'snow' }
  );

  // How can I pass quill to the parent template?

}

Template.form.events({
  'submit form': function(e, tmpl) {
    e.preventDefault();

    // How can I access quill variable on the nested template, so I can 
    // call quill.getHTML()?

}

推荐答案

这是我用来解决此类问题的模式.定义一个名为 Editor 的类和一个模板 editor.目的是 editor 内的数据上下文将是 Editor 的一个实例.

Here's a pattern I use to solve this sort of problem. Define a class called Editor and a template editor. The intention is that the data context inside editor will be an instance of Editor.

function Editor() {
  this.quill = null;
}

Template.editor.rendered = function () {
  this.data.quill = new Quill(...);
}

<template name="editor">...</template>

在form 的created 回调中，创建一个Editor 并将其存储在模板实例中.然后，当您调用 editor 模板时，传入 Editor 实例作为数据上下文.

Inside form's created callback, create an Editor and store it on the template instance. Then when you call out to the editor template, pass in the Editor instance as the data context.

Template.form.created = function () {
  this.editor = new Editor();
}

Template.form.helpers({
  editorInstance: function () {
    return Template.instance().editor;
  }
});

<template name="form">
  <form>
    {{> editor editorInstance }}
    <input type="submit" value="save"/>
  </form>
</template>

然后你可以在 Editor 原型上定义方法，它可以被 form 调用:

You can then define methods on the Editor prototype which can be called by the form:

Editor.prototype.getTextAsHTML = function () {
  return this.quill && this.quill.getHTML();
}

Template.form.events({
  "submit form": function(e, tmpl) {
    e.preventDefault();
    var html = tmpl.editor.getTextAsHTML();
    // ...
  }
}

这是抽象editor 细节的好方法，这样form 就不需要知道它.您可以重复使用 editor，如果您想更改它，您只需确保 getTextAsHTML 工作相同.

This is a nice way to abstract the details of the editor so that the form doesn't need to know about it. You can reuse the editor and if you ever want to change it, you just have to make sure getTextAsHTML works the same.

这篇关于如何访问嵌套的模板属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！