Question

我正在学习Meteor并自己构建一个待办事项应用程序。 90％完成，但最后一件事让我感到高兴。

如果检查了任务，我就可以更改任务类。现在我正在尝试根据“优先级”更改任务的颜色。组。我用于模板的助手是：

Template.item.helpers({
isComplete: function () {// Set class according to status
    return this.checked ? 'complete' : '';
},
isChecked: function () {
    return this.checked ? 'checked' : false;
},
isPriority: function(){
    var priorityClass = $('#prioritySet').html();
    return priorityClass;
}

}）;

以下是适用的模板代码的一部分。

 <a href="#"
           class="js-update-task-form {{isComplete}} {{isPriority}}"  >
            {{task}}
        </a>

isProperty是一个无法正常工作的。当页面加载时，它不会为元素分配正确的类，但是如果我更新任务，则更改“＆＃39; priority＆＃39;它会将类更改为更改前的类。

我的问题是。如何获取当前分配给＆＃39; #prioritySet＆＃39;的值。 html并将其指定为元素的类。

我尝试将它放在一个就绪函数中并且不起作用。我还尝试使用模板名称 .rendered函数，但这根本不起作用。

任何帮助都会很棒。感谢。

Answer 1

我看到你通过改变加载优先级的方式来回答这个问题。但是，为了解释原始问题中发生的情况，您将调用模板的isPriority帮助程序，而辅助程序又在DOM实际完全呈现之前使用jQuery访问DOM。这意味着$('#prioritySet').html()将返回undefined。然后在加载DOM之后，不会再次调用isPriority模板助手，因为它没有利用任何类型的被动数据源。

另一种方法（针对您的原始问题）可能是仅在DOM完全加载后引用DOM以获取#prioritySet值，然后将此结果存储在ReactiveVar中。然后，您可以在ReactiveVar帮助程序中返回此isPriority，这将使您的帮助程序反应性行为。因此，当调整ReactiveVar时，您的UI将会更新。以下是一个简单的例子：

1）确保安装了reactive-var软件包：meteor add reactive-var。

2）样本模板：

Template.item.onCreated(function onCreated() {
  this.prioritySet = new ReactiveVar();
});

Template.item.onRendered(function onRendered() {
  this.autorun(() => {
    this.prioritySet.set($('#prioritySet').html().trim());
  })
});

Template.item.helpers({
  ...
  isPriority() {
    return Template.instance().prioritySet.get();
  },
  ...
});

Answer 2

我找到了解决方案。不知道为什么我之前没有想到这一点。

在帮助程序中，我所要做的就是从mongodb字段“返回this.priority”，所以代码现在就像这样。

<child>
                  <object class="GtkScrolledWindow" id="mainFigure">
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="hscrollbar_policy">always</property>
                    <property name="vscrollbar_policy">always</property>
                    <property name="shadow_type">in</property>
                    <child>
                      <placeholder/>
                    </child>
                  </object>
                  <packing>
                    <property name="expand">True</property>
                    <property name="fill">True</property>
                    <property name="position">1</property>
                  </packing>
</child>

}）;

感谢所有寻求解决方案的人。

流星将元素类转换为HTML

2 个答案: