gpt4 book ai didi

javascript - 为什么我的模板的 if 子句没有反应式更新?

转载 作者:行者123 更新时间:2023-12-03 08:10:56 24 4
gpt4 key购买 nike

无论出于何种原因,我花费了无数个小时的故障排除时间都无法解决这个问题。我有一些简单的助手使用 Bootstrap 3 nav-tabs 列表。

我想根据哪个列表项处于事件状态来呈现不同的模板。这是我的 helper :

Template.Profile.helpers({
'personal':function(){
if($('.profile-info').hasClass('active')) {
return true;
} else {
return false;
}
},
'groups':function(){
if($('.profile-groups').hasClass('active')) {
return true;
} else {
return false;
}
},
'commitments':function(){
if($('.profile-commitments').hasClass('active')) {
return true;
} else {
return false;
}
}
});

这是我的 HTML:

<ul class="nav nav-tabs">
<li class="active profile-info"><a href="#">Personal Info</a></li>
<li class="profile-groups"><a href="#">Groups</a></li>
<li class="profile-commitments"><a href="#">Commitments</a></li>
</ul>

{{#if personal}}
{{> ProfilePersonal}}
{{else}}
{{#if groups}}
{{> ProfileGroups}}
{{else}}
{{> ProfileCommits}}
{{/if}}
{{/if}}

最佳答案

当您单击选项卡时,助手将不会重新运行,因为没有反应性数据更改使计算无效。

一种更 meteor 的方法是添加一个 react 变量来保存选项卡状态并在事件监听器中更改它。

<template name="Profile">
<ul class="nav nav-tabs">
{{#each tabs}}
<li class="{{isActive @index}} profile-{{name}}"><a href="#">{{title}}</a></li>
{{/each}}
</ul>
{{> Template.dynamic template=tpl}}
</template>

@index 引用当前循环的索引,它作为参数提供给 isActive 帮助器。

然后,您的 JavaScript 文件可以包含选项卡和处理代码的定义:

var tabs = [{
idx: 0,
name: "info",
title: "Personal Info",
template: "ProfilePersonal"
}, {
idx: 1,
name: "groups",
title: "Groups",
template: "ProfileGroups"
}, {
idx: 2,
name: "commitments",
title: "Commitments",
template: "ProfileCommits"
}];

选项卡是一个普通的 JS 数组。以下代码在模板的上下文中使用它们:

Template.Profile.helpers({
// get current sub-template name
tpl: function() {
var tpl = Template.instance();
return tabs[tpl.tabIdx.get()].template;
},
// get the tabs array
tabs: function() {
return tabs;
},
// compare the active tab index to the current index in the #each loop.
isActive: function(idx) {
var tpl = Template.instance();
return tpl.tabIdx.get() === idx ? "active" : "";
}
});

Template.Profile.events({
'click .nav-tabs > li': function(e, tpl) {
tpl.tabIdx.set(this.idx);
}
});

Template.Profile.onCreated(function() {
this.tabIdx = new ReactiveVar();
this.tabIdx.set(0);
});

创建模板时 (onCreated()),将添加一个新的 react 变量作为实例变量。然后可以在帮助程序中访问该变量并在事件处理程序中设置。

事件处理程序接收事件对象和模板实例作为参数,并将数据上下文设置为 this 指针;因此,tpl.tabIdx引用 react 变量,this引用代表单击选项卡的对象(例如,

{
idx: 0,
name: "info",
title: "Personal Info",
template: "ProfilePersonal"
}

对于第一个选项卡,因为这是呈现第一个选项卡时模板的数据上下文。

辅助函数通过调用 Template.instance() 获取 Template 实例。然后,它查询响应式(Reactive)数组的值。

这会在响应式(Reactive)上下文中创建计算(帮助程序是响应式(Reactive)上下文,当它们创建的计算无效时,它们会重新运行,并且当 Mongo 游标或计算中读取的 react 变量发生更改时会发生这种情况)。

因此,当在事件处理程序中设置 react 变量时,助手将重新运行,并且模板会反射(reflect)新值。

这些都是 Meteor 的基础,并在完整的 Meteor 文档和许多资源中进行了解释。

关于javascript - 为什么我的模板的 if 子句没有反应式更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34151070/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com