Question

我需要在CSS中将Meteor JS应用于选定的一个。我做了一个带有名称列表的示例，然后点击一个名称然后获取该名称的详细信息。所以这里我需要在名单列表中突出显示点击的名称。在此示例中，我使用发布/订阅方法获取名称。所以如何突出显示名称列表中的选定名称。请参阅下面的代码和css [这里css悬停将起作用，但主动不起作用]＆amp;建议我该怎么做？

模板代码：

<template name="client">
    <div style="float:left;">
    <div style="float:left;">
   <h2> Clients List</h2>
    {{#each clientname}}      
             <div class="client {{isselected}}">{{name}}</div> 
    {{/each}}
    </div>
    <div style="float:left;padding-left:400px;">
    {{> clientmaincontent}}
    </div>
    </div>
</template>

<template name="clientdata">
<div>
<h1> This is Client Data</h1>
<div style="font-weight:bold;font-size:24px;">Name : {{cname}}</div></br>
<div style="font-weight:bold;font-size:24px;">ID : {{id}}</div> </br>
<div style="font-weight:bold;font-size:24px;">Hcare : {{hcare}}</div> 
</div>
</template>

CSS：

  .client .selected
 {
  background-color: red;
 }
.client {
    cursor: pointer;
    width:200px;
    height:20px;
    border:4px solid #eeeee8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    margin: 4px;
   // float:left;
    text-align: center;
    background-color:#eeeee8;
    font-size: 20px;
}

JS代码：

Template.client.events
          ({
            'click .client' : function (e,t)
            {

              // template data, if any, is available in 'this'
              if (typeof console !== 'undefined')
              //alert("You pressed the button");
                console.log("You pressed the Client button");
                e.preventDefault();
                 Session.set("selectedClient", this.name);
                        }
              });
Template.client.isselected = function ()
             {
                console.log("Hello DD="+Session.equals("selectedClient", this.name) ? "selected" : '');
                return Session.equals("selectedClient", this.name) ? "selected" : '';
              };

Answer 1

这应该有效。虽然最好不要将客户端名称存储在会话变量中，而是更加唯一的标识符。如果客户端名称等于存储在会话变量{{isSelected}}中的名称，则selected会将selectedClient插入到类列表中。

HTML：

<!-- in some other template -->
{{#each clientname}}      
  {{> client}}
{{/each}}

<template name="client">
   <div class="client {{isSelected}}">{{name}}</div> 
</template>

JS（换入Meteor.isClient）：

Template.client.events({
  'click': function () {
    Session.set("selectedClient", this.name);
  }
});

Template.client.isSelected = function () {
  return Session.equals("selectedClient", this.name) ? "selected" : '';
};

CSS：

.client .selected {
  background-color: red;
}

如何将CSS应用于流星中的选定一个？

1 个答案: