时间戳

首页 > 解决方案 > 在 jsViews 模板中启用按钮

jquery - 在 jsViews 模板中启用按钮

问题描述

我想在 jsViews/JsRender 模板中启用从数据库中检索员工评论的按钮。那部分工作正常。但我需要一个显示“回复”的按钮，以便其他人可以将他们的评论添加到帖子中。单击该按钮时，应出现一个模式，允许他们输入文本。

该按钮确实按应有的方式显示，但我无法让它执行操作（例如触发警报框，更不用说模式了）。jsViews/jsRender 网站上的演示在我的服务器环境中工作，所以我知道这不是浏览器或 CDN 问题。

我的第一次尝试只是通过 jQuery 启用按钮：

<script id="theTmpl2" type="text/x-jsrender">

<div class="row">
<div class="card">



<li class="list-group-item">
 <div class="card-block">
  <h6 class="card-title"><b>{{:first_name}} {{:last_name}} 
    {{:id}} 
 </b></h6>

<p class="card-text text-muted large">


<b>Employee ID:</b> {{:emp_id}}<br>
<b>Employee:</b> {{:emp_first}} {{:emp_last}} <br>
<b>Subject:</b> {{:subject}} <br>
<b>Message:</b> {{:message}} <br>
<b>Post Type:</b> {{:post_type}} <br>
<b>Time:</b> {{:timestamp}} <br>

</p>
 <button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
 <button type="button" class="btn btn-success btn-sm" 
 id="new_post_btn">New Post</button>


</li>

 </div>
 </div>
</div>

</script>




 <script id="theTmpl2" type="text/x-jsrender">

<div class="row">
<div class="card">



 <li class="list-group-item">
 <div class="card-block">
 <h6 class="card-title"><b>{{:first_name}} {{:last_name}} {{:id}} 
 </b></h6>

 <p class="card-text text-muted large">


<b>Employee ID:</b> {{:emp_id}}<br>
<b>Employee:</b> {{:emp_first}} {{:emp_last}} <br>
<b>Subject:</b> {{:subject}} <br>
<b>Message:</b> {{:message}} <br>
<b>Post Type:</b> {{:post_type}} <br>
<b>Time:</b> {{:timestamp}} <br>

</p>
  <button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
  <button type="button" class="btn btn-success btn-sm" 
  id="new_post_btn">New Post</button>


 </li>

   </div>
 </div>


  <script>
     $( "#new_post_btn" ).click(function() {
     alert( "Handler for .click() called." );
    });
   </script>

然后我尝试了（来自网站上的演示）：

<button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
 <button type="button" class="btn btn-success btn-sm" 
  id="new_post_btn">New Post</button>

 <span id="topLinked">
  <button data-link="{on ~doSomething}">top level</button>
 </span>

 <script id="tmpl" type="text/x-jsrender">
  <button data-link="{on ~doSomething}">in template</button>

使用此脚本：

<script>
 var person = {};

 var helpers = {
 doSomething: function() {
  alert("do something");
  }
 }

 $.link(true, "#topLinked", person, helpers); // Data-link top- 
   level content


 </script>

在我的第一次尝试中，使用 jQuery 方法，该按钮确实出现在屏幕上，但是当我单击它时没有任何反应。

在我的第二次尝试中，再次出现了两个按钮（'doSomething'），但是当我点击它们时 - 什么也没有。

我还尝试了 jsViews/jsRender 站点上的演示中描述的其他几种方法，但这些方法也没有成功。

标签： jqueryjsrenderjsviews

解决方案

你确定你没有犯过一个简单地阻止你的脚本运行的脚本错误。

这对我有用：

<body>
 <span id="topLinked">
  <button data-link="{on ~doSomething}">top level</button>
 </span>
<script>
 var person = {};

 var helpers = {
 doSomething: function() {
  alert("do something");
  }
 }

 $.link(true, "#topLinked", person, helpers); // Data-link top-level content
</script>

</body>

但是这里有一个换行符 - 就像你上面的副本

 $.link(true, "#topLinked", person, helpers); // Data-link top-(You put a new-line here!) 
   level content

将是无效的javascript。您是否在脚本中设置了断点并在调试器中运行？

对于您的其他示例，您没有包含渲染和链接模板的代码......

无论如何，对于任何示例，例如https://www.jsviews.com/#link-events@button，您可以简单地复制完整代码选项卡的内容，然后它应该与演示中的一样工作（例如下面的代码）。然后您可以迭代更改为您自己的版本。

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://www.jsviews.com/download/jsviews.min.js"></script>
  <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />
</head>
<body>

<style>
  .red {color: red!important;}
</style>

<span id="result"></span>

<script id="tmpl" type="text/x-jsrender">
  <button data-link="{on ~doSomething}" id="btn0">Click me</button>

  {^{on ~doSomething}}<button id="btn1">Click me</button>{{/on}}

  {^{on ~doSomething}}Click me{{/on}}

  {^{on ~doSomething tmpl="Click me" /}}

  {^{on ~doSomething /}}

  {^{on ~doSomething height=18 width=75 class="red" id="btn5"}}Click me{{/on}}
</script>

<script>
var tmpl = $.templates("#tmpl");

var person = {};

var helpers = {
  doSomething: function(ev) {
    alert("do something. id: " + ev.target.id);
  }
}

tmpl.link("#result", person, helpers); // Render and link the template

</script>

</body>
</html>

推荐阅读