使用嵌套模板绑定获取消息时出现淘汰模板绑定问题：意外令牌')'答案

【问题标题】：Issue with knockout template bind, when using nested template binding getting Message: Unexpected token ')'使用嵌套模板绑定获取消息时出现淘汰模板绑定问题：意外令牌')'
【发布时间】：2021-05-19 01:57:33
【问题描述】：

我已将淘汰赛和 jquery 版本升级到 3.5.1，但遇到以下问题

未捕获的语法错误：无法处理绑定“模板：函数（）{返回 {name:"sectionTemplate",foreach:sections,templateOptions:{ deleteSection:deleteSection,openAddDocumentsDialog:openAddDocumentsDialog}} }" 消息：意外的令牌')'

当我们使用嵌套模板时，敲除库是否有任何问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    
</head>
<body>
    
    <div data-bind="template: { name: 'items', data: breakfast, templateOptions: { header: 'Breakfast Items', message: 'Wake up to these delicious items!', class: 'breakfast' } }"></div>
     
    <script id="items" type="text/html">
        <h3>${$item.header}</h3>
        <div class="${$item.class}">
            {{each $data}}
            <p>
                <span class="name">${name}</span>
                <span class="price">${price}</span>
            </p>
            {{/each}}
        </div>
        <p><em>${$item.message}</em></p>
        <hr />
        <div data-bind="template: { name: 'items2', data: newItems, templateOptions: { header: 'New Items', message: 'Wake up to these delicious items!', class: 'breakfast'} }"></div>

    </script>
    <script id="items2" type="text/html">
        <h3>${$item.header}</h3>
        <div class="${$item.class}">
            {{each $data}}
            <p>
                <span class="name">${name}</span>
                <span class="price">${price}</span>
            </p>
            {{/each}}
        </div>
        <p><em>${$item.message}</em></p>
        <hr />


    </script>

    <script type="text/javascript">
        var viewModel = {
            breakfast: [
                { name: "toast", price: 2.50 },
                { name: "pancakes", price: 4.00 },
                { name: "eggs", price: 3.25 }],
            
            
            newItems: [
                { name: "Oats", price: 2.50 }],
        };

        ko.applyBindings(viewModel);
    </script>

</body>
</html>

当我使用嵌套模板 item2 时出现特别错误

请帮帮我，在此先感谢

【问题讨论】：

标签： jquery knockout.js templatebinding

【解决方案1】：

在模板中使用templateOptions 似乎存在问题。从项目模板中删除它使其工作。为了解决这个问题，我建议为模板制作一个视图模型，其中包含需要传入的属性，而不是使用 templateOptions。

还注意到，要访问 newItems 属性，您需要将 $root 传递给第一个模板绑定，而不是 breakfast 属性。

我知道这不是一个修复程序，但希望对您的调试有所帮助。

var viewModel = {

  breakfast: [{
      name: "toast",
      price: 2.50,
    },
    {
      name: "pancakes",
      price: 4.00
    },
    {
      name: "eggs",
      price: 3.25
    }
  ],


  newItems: [{
    name: "Oats",
    price: 2.50
  }],
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="items" type="text/html">
  <h3>${$item.header}</h3>
  <div class="${$item.class}">
    {{each $data.breakfast}}
    <p>
      <span class="name">${name}</span>
      <span class="price">${price}</span>
    </p>
    {{/each}}
  </div>
  <p><em>${$item.message}</em></p>
  <hr />
  <div data-bind="template: { name: 'items2', data: newItems }"></div>
</script>

<script id="items2" type="text/html">
  <h3>${$item.header}</h3>
  <div class="${$item.class}">
    {{each $data}}
    <p>
      <span class="name">${name}</span>
      <span class="price">${price}</span>
    </p>
    {{/each}}
  </div>
  <p><em>${$item.message}</em></p>
  <hr />


</script>

<div data-bind="template: { name: 'items', data: $root, templateOptions: { header: 'Breakfast Items', message: 'Wake up to these delicious items!', class: 'breakfast' }}">
</div>

重要

还有一个关于使用来自 knockout documentation - Note 6 的 jquery.tmpl 的注释 -

请注意，截至 2011 年 12 月，jQuery.tmpl 不再位于积极发展。我们推荐使用 Knockout 的原生基于 DOM 的模板（即 foreach、if、with 等绑定）而不是 jQuery.tmpl 或任何其他基于字符串的模板引擎。

只需使用 knockoutjs 并删除 jquery.tmpl

以下代码不再需要 jquery.tmpl，而仅使用 knockoutjs 语法作为解决问题的替代方法。

function templateVm(header, className, message,  data ){
  var self = this;
  self.header = header;
  self.className = className;
  self.message = message;
  self.data = data;
}


var viewModel = {
  
  breakfast: new templateVm('Breakfast Items','breakfast','Wake up to these delicious items!', [{
      name: "toast",
      price: 2.50,
    },
    {
      name: "pancakes",
      price: 4.00
    },
    {
      name: "eggs",
      price: 3.25
    }
  ]),


  newItems: new templateVm('New Items','breakfast','Wake up to these delicious items!',[{
    name: "Oats",
    price: 2.50
  }]),
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="items" type="text/html">
  <div data-bind="template: { name: 'items2', data: breakfast }"></div>
  <div data-bind="template: { name: 'items2', data: newItems }"></div>
</script>

<script id="items2" type="text/html">
  <h3 data-bind="text: header"></h3>
  <div data-bind="class: className, template: {name: 'name-price',  foreach: data}"></div>
  <p><em data-bind="text: message"></em></p>
  <hr />
</script>

<script id="name-price" type="text/html">
    <p>
      <span class="name" data-bind="text: name"></span>
      <span class="price" data-bind="text: price"></span>
    </p>
</script>

<div data-bind="template: { name: 'items', data: $root}">
</div>

【讨论】：

这是正确的答案，我想补充一点，templateOptions 甚至不是一个记录在案的财产（不再？）
是的，我快速浏览了 jquery.tmpl 档案，但没有找到任何与 templateOptions 相关的有用信息。