流星选中时删除元素中的文本

Question

我正在学习 Meteor，我正在尝试为一项任务选中一个框，然后 JQuery 在选中的文本上划掉。我有助手以我想要的方式向我显示数据以及事件处理程序，以便在检查 inout 时更新数据库。

我想要的是能够测试数据库是否显示 'completed'，如果是，则删除 a 标记文本。我已经编写了一个助手来执行此操作，但不确定将助手放在模板中的什么位置。我还想知道在选中复选框和正在更新的数据库时，当数据库发生变化时，模板是否会重新渲染。

这是我的代码：

<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

执行此操作的 "Meteor Way" 如下（无需使用 JQuery）：

先来个很简单的CSS

.completed{
   text-decoration: line-through;
}

然后在您要删除的 DOM 元素的 class 属性中使用助手 isComplete。

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

然后制作模板助手 return class 如果任务完成，删除文本的名称：

Template.item.helpers({
  isComplete: function(){
    // This would represent the current item being iterated over
    return this.checked ? 'completed' : '';
  }
});

此代码是反应式，这意味着它会在基础数据更改时自动更新。

流星选中时删除元素中的文本

Meteor Striking out text in element when checked

meteor

meteor-blaze