this.tpl = '<li class="text-list">\ <ul class="info-items">\ <li class="info-item">文件文号：<span title="{{file}}">{{file}}</span></li>\ <li class="info-item">所属部门：<span title="{{depart}}">{{depart}}</span></li>\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 封装juqery组件，现在想把这个tpl做成可配置的，比如用户配置：{name:'文件文号：',fieldName:'file'}，页面上就会有这一行，也只有这一行

可以将原来的 tpl 改成模板字符串，然后在模板字符串中使用变量来代替原来的字符串。比如可以这样实现：

const tplConfig = {
  name: '文件文号：',
  fieldName: 'file'
};

const tpl = `
  <li class="text-list">
    <ul class="info-items">
      <li class="info-item">${tplConfig.name}<span title="{{${tplConfig.fieldName}}}">{{${tplConfig.fieldName}}}</span></li>
    </ul>
    <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>
  </li>
`;

这样，就可以将配置项动态地插入到模板字符串中，从而生成可配置的代码。

相关问题

封装jquery组件，这是组件html模板，现在想对咨询按钮加个点击事件，能够在调用组件时抛事件出来 this.tpl = '<li class="text-list">\ <a class="text-list-info" target="{{target}}" href="' + (this.url ? this.url + '?guid={{guid}}' : 'javascript:;') + '">\ <p class="name" title="{{name}}">{{name}}</p>\ <ul class="info-items">\ <li class="info-item">文件文号：<span title="{{file}}">{{file}}</span></li>\ <li class="info-item">所属部门：<span title="{{depart}}">{{depart}}</span></li>\ <li class="info-item"><p class="infor-name">发布时间：<span title="{{date}}">{{date}}</span></p></li>\ <li class="info-item">政策主题：<span title="{{theme}}">{{theme}}</span></li>\ <li class="info-item">行业范围：<span title="{{trade}}">{{trade}}</span></li>\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 请提供代码

可以在组件的构造函数中，给咨询按钮绑定一个点击事件，并在点击事件中触发抛出事件。代码示例如下：

function MyComponent() {
  this.tpl = '<li class="text-list">\n' +
             '<a class="text-list-info" target="{{target}}" href="' + 
             (this.url ? this.url + '?guid={{guid}}' : 'javascript:;') + '">\n' +
             '<p class="name" title="{{name}}">{{name}}</p>\n' +
             '<ul class="info-items">\n' +
             '<li class="info-item">文件文号：<span title="{{file}}">{{file}}</span></li>\n' +
             '<li class="info-item">所属部门：<span title="{{depart}}">{{depart}}</span></li>\n' +
             '<li class="info-item"><p class="infor-name">发布时间：<span title="{{date}}">{{date}}</span></p></li>\n' +
             '<li class="info-item">政策主题：<span title="{{theme}}">{{theme}}</span></li>\n' +
             '<li class="info-item">行业范围：<span title="{{trade}}">{{trade}}</span></li>\n' +
             '</ul>\n' +
             '</a>\n' +
             '<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\n' +
             '</li>';

  // 给咨询按钮绑定点击事件
  this.onClick = function() {
    // 触发抛出事件
    var event = new CustomEvent('consult', { detail: '点击了咨询按钮' });
    document.dispatchEvent(event);
  };
  var self = this;
  $(document).on('click', '.text-list-btn', function() {
    self.onClick();
  });
}

在上面的代码中，我们给 MyComponent 的构造函数添加了一个 onClick 方法，该方法在点击咨询按钮时会触发抛出一个名为 "consult" 的事件，并带有一个字符串类型的详细信息。然后，我们在构造函数中使用 jQuery 给咨询按钮绑定了一个点击事件，该事件在触发时调用 onClick 方法。

this.tpl = '<li class="text-list">\ <a class="text-list-info" target="{{target}}" href="' + (this.url ? this.url + '?guid={{guid}}' : 'javascript:;') + '">\ <p class="name" title="{{name}}">{{name}}</p>\ <ul class="info-items">\ <li class="info-item">文件文号：<span title="{{file}}">{{file}}</span></li>\ <li class="info-item">所属部门：<span title="{{depart}}">{{depart}}</span></li>\ <li class="info-item"><p class="infor-name">发布时间：<span title="{{date}}">{{date}}</span></p></li>\ <li class="info-item">政策主题：<span title="{{theme}}">{{theme}}</span></li>\ <li class="info-item">行业范围：<span title="{{trade}}">{{trade}}</span></li>\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 封装juqery组件，这个模板目前是固定几个，现在想把这个做成可配置的，比如用户配置：{name:'文件文号：',fieldName:'file'}，就能生成这一行

的 HTML 代码。

我的建议是，你可以将这个模板字符串中的固定文本部分提取出来，然后将可配置的部分作为变量插入到模板字符串中。比如，可以将固定文本部分提取成如下形式：

const tplPrefix = '<li class="text-list"><a class="text-list-info" target="{{target}}" href="{{url}}"><p class="name" title="{{name}}">{{name}}</p><ul class="info-items">';
const tplSuffix = '</ul></a><a class="text-list-btn" href="javascript:;"><span>咨询</span></a></li>';

然后，你可以将用户配置的内容转化成一个对象，比如：

const config = {
  file: {name: '文件文号：', fieldName: 'file'},
  depart: {name: '所属部门：', fieldName: 'depart'},
  date: {name: '发布时间：', fieldName: 'date'},
  theme: {name: '政策主题：', fieldName: 'theme'},
  trade: {name: '行业范围：', fieldName: 'trade'}
};

最后，你可以通过遍历用户配置的对象，来生成可配置部分的 HTML 代码。代码示例如下：

let tplConfigurable = '';
for (const key in config) {
  tplConfigurable += `<li class="info-item">${config[key].name}<span title="{{${config[key].fieldName}}}">{{${config[key].fieldName}}}</span></li>`;
}

const tpl = tplPrefix + tplConfigurable + tplSuffix;

这样，你就可以根据用户配置来生成不同的 HTML 代码了。