Question

我想启用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网站上的演示中描述的其他几种方法，但是这些方法也都没有成功。

Answer 1

您确定没有发生仅导致脚本无法运行的脚本错误。

这对我有用：

<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>

在jsViews模板中启用按钮

1 个答案: