时间戳

首页 > 解决方案 > 使用嵌套模板绑定获取消息时出现淘汰模板绑定问题：意外令牌')'

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

问题描述

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

未捕获的语法错误：无法处理绑定“模板：函数（）{return {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 时出现特别错误

请帮帮我，在此先感谢

标签： jqueryknockout.jstemplatebinding

解决方案

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>

重要的

还有一个关于使用淘汰文档中的 jquery.tmpl 的注释 - 注意 6 -

请注意，截至 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>

推荐阅读