Question

我正在学习Meteor，我正在尝试检查一个任务的框，并在检查时依次检查JQuery文本。我有帮助器，以我想要的方式向我显示数据以及事件处理程序，以便在检查inout时更新数据库。

我想要的是能够测试数据库是否显示“已完成”，如果是，则删除标记文本。我已经编写了一个帮助程序，但我不确定模板中的哪个位置可以放置帮助程序。我还想知道在检查框和更新数据库时是否在数据库发生更改时重新呈现模板。

这是我的代码：

<template name="item">
<div class="left" style="border-bottom:1px solid lightslategray;border-radius:.2em;">
    <div class="left"><!--left-->
        <li>
            <input class="items js-checked" id="checked" type="checkbox">
        </li>
        <li>
            <a href="#" class=" items js-update-task-form js-complete">
                {{task}}
            </a>
        </li>

        <div class="clear"></div>
    </div>
    <div class=" right  "><!--right-->
        <li class="items"><span class="label-position due">{{due}}</span></li>
        <li><span class="label label-info items priority-position {{priority}}"
                  id="{{priority}}">{{priority}}</span></li>
        <li>
            <button type="button" class="label label-info  trash js-delete-task"><span
                    class="glyphicon glyphicon-remove"></span></button>
        </li>
    </div>
    <!--<div class="clear"></div>-->
</div>

以下是模板的帮助：

 items: function() {
    var priority = $("#priority_sorter").val();

    /// TODO fix so this can be sorted by 'completed' as well

    var priority_val = Session.get('priority');
    var user = Meteor.user()._id;
    /// Filter by Priority
    if (priority_val === "All Tasks") {
        //console.log("First IF priority set to ", priority_val);
        return Items.find();

    } else {
        //console.log("Else statement priority value is "+ priority_val+ ". With User ID "+ user);
        return Items.find({owner: user, "priority": priority_val}, {sort: {"created": -1}});
    }
},
isComplete: function(){
    var task = Items.thisId.checked;
    if(Items.thisId.checked === 'complete'){
        console.log("Checked confirmed for "+ task);
        $('.js-complete').wrap("<strike>");
    }
},

Answer 1

＆＃34;流星之路＆＃34;要做到这一点如下（不需要使用JQuery）：

首先是一个非常简单的CSS

<button class="ui-button-primary ui-button ui-widget ui-state-default 
ui-corner-all ui-button-text-only" type="submit" data-
qa="sidebar.find.submit.button" role="button" aria-disabled="false">
<span class="ui-button-text">Find</span></button>

然后在您想要删除的DOM元素的.completed{ text-decoration: line-through; }属性中使用帮助器isComplete。

class

然后make模板助手返回类名，以便在任务完成时删除文本：

<template name="item">
  <div class="left" style="border-bottom:1px solid lightslategray;border-radius:.2em;">
    <div class="left"><!--left-->
      <li>
        <input class="items js-checked" id="checked" type="checkbox">
      </li>
      <li>
        <a href="#" class=" items {{isComplete}}">
          {{task}}
        </a>
      </li>

      <div class="clear"></div>
    </div>
    <div class=" right  "><!--right-->
      <li class="items">
        <span class="label-position due">{{due}}</span>
      </li>
      <li>
        <span class="label label-info items priority-position {{priority}}" id="{{priority}}">{{priority}}</span>
      </li>
      <li>
        <button type="button" class="label label-info  trash js-delete-task">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </li>
    </div>
    <!--<div class="clear"></div>-->
  </div>
</template>

此代码被动，这意味着它会在基础数据发生变化时自动更新。

Meteor在检查时敲击元素中的文本

1 个答案: