Question

我正在学习Lift框架的细节，想要创建一个简单的网页。我想看看将模板应用到我正在制作的页面是多么容易，并决定只应用默认模板。令我惊讶的是，页面上的所有内容都没有明显的原因重复。页面内容大致基于此演讲中的代码：ScalaDC (Scala + Lift + Angular) is Magic

我的页面发生了什么：

Duplicate stuff!

这是我的代码：

的index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Which character is the best?</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body class="container">
  <div data-lift="surround?with=default&at=content">
      <h1>Which Character is the best?</h1>
      <button data-lift="CharacterSnippet.renderButton">Ask the server </button>
      <div id="char-div" style="display:none;" class="panel panel-default">
          <div class="panel-heading">
              <p class="lead" >If only the server knew the answer...</p>
          </div>
          <div class="panel-body">
              <img width="512"/>
          </div>
      </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
</body>
</html>

default.html：（与Lift附带的相比几乎没有变化）

<html>
<head>
  <meta charset="UTF-8">
  <title data-lift="Menu.title">App: </title>
  <style data-lift="CSS.blueprint"></style>
  <style data-lift="CSS.fancyType"></style>
  <script id="jquery" src="/classpath/jquery.js" type="text/javascript"></script>
  <script id="json" src="/classpath/json.js" type="text/javascript"></script>
  <style type="text/css">
    /* <![CDATA[ */
    .edit_error_class {
      display: block;
      color: red;
    }

    .sidebar ul {
     margin:0;
     padding:0;
     border-bottom:1px solid #ccc;
   }

   .sidebar ul li {
     margin:0;
     padding:0;
     list-style:none;
     border:1px solid #ccc;
     border-bottom:none;
   }

   .sidebar ul li a {
     display:block;
     padding:3px;
     text-indent:30px;
     text-decoration:none;
   }

   .sidebar ul li span {
     display:block;
     padding:3px;
     text-indent:30px;
     text-decoration:none;
   }

   .sidebar ul li a:hover {
     background-color: #eee;
   }

   .spinner {
     display:none;
     margin-bottom: 0px;
     margin-left: 5px;
   }

   /* ]]> */
 </style>
</head>
<body>
  <div class="container">
    <div class="column span-12 last" style="text-align: right">
      <h1 class="alt">Learning Lift<img class="spinner" alt="" id="ajax-loader" src="/images/ajax-loader.gif"></h1>
    </div>

    <hr>

    <div class="column span-6 colborder sidebar">
      <hr class="space" >

      <span data-lift="Menu.builder"></span>

      <div data-lift="Msgs?showAll=true"></div>
      <hr class="space">
    </div>

    <div class="column span-16 last">
      <div id="content">The main content will get bound here</div>
    </div>

    <hr>

    <div class="column span-23 last" style="text-align: center">
      <h4 class="alt">
        <a href="http://www.liftweb.net"><i>Lift</i></a>
        is Copyright 2007-2014 WorldWide Conferencing, LLC.
        Distributed under an Apache 2.0 License.</h4>
      </div>
    </div>
  </body>
  </html>

从data-lift="surround?with=default&at=content"中的第一个div删除body会使页面加载正常，这很奇怪，因为模板在index.html中编写的默认代码正常工作当我开始这个项目时。

那么我该怎么做才能解决这个问题呢？

Answer 1

Lift使用的HTML5解析器有时会遇到无效内容。在这种情况下，我认为问题可能是您调用环绕声片段的方式。当您有多个参数传递给代码段时，请使用;代替&来分隔它们。所以试试：

data-lift="surround?with=default;at=content"

预期使用未转义的&来启动HTML5中的字符引用。

Lift正在复制我的内容

1 个答案: