Meteor、表单验证和 Bootstrap 手风琴答案

【问题标题】：Meteor, Form validation and Bootstrap accordionMeteor、表单验证和 Bootstrap 手风琴
【发布时间】：2013-06-10 10:26:35
【问题描述】：

我在 Meteor 应用程序中有一个表单，其中包含可由 Bootstrap 手风琴访问的单选按钮列表。我已经在流星中实现了一个验证路由，它将类插入到输入元素中以将它们标记为有效/无效。

问题是：每当一个输入元素的验证状态发生变化时，都会重新绘制模板并且当前打开的手风琴关闭。

我通过这种笨拙的方法解决了这个问题：

Meteor.startup(function() {
    // track collapse state of accordion....
$('.collapse').on('shown', function() {
    Session.set(addBookingCollapse, $(this).attr('id'));
});
});

Template.addrecord.helpers({
    openAccordion: function(accordion) {
        if (Session.get(addBookingCollapse) == accordion) {
            return 'in'
        };
    }
});

<div id="collapseOne" class="accordion-body 
collapse {{openAccordion 'collapseOne'}}">

...其他四个可折叠元素以此类推

但是看在谁的份上，一定有更优雅的解决方案？我不想为此浪费一个会话变量......

【问题讨论】：

标签： meteor

【解决方案1】：

我并没有真正仔细研究过您的代码/问题，但是您为什么要使用 id 来单独针对每个问题？为什么不像这样为所有这些类使用一个类：

$('.a-class-that-you-name').on('shown', function() {
    var thisSpecificId = $(this).attr('id');
    Session.set('addBookingCollapse', thisSpecificId);
});

这行得通吗？

【讨论】：

是的，这样可以消除一些丑陋。但我反对会话变量中的整个跟踪打开状态。有没有办法用 .preserve 或恒定区域来规避这个问题？我试过了，但我没有找到办法。
更新了问题以匹配此建议。

【解决方案2】：

将输入元素放在{{#isolate}}{{\isolate}} 块中可能有助于避免重新渲染整个模板。见：Meteor Isolates

【讨论】：

是的，没有帮助。好吧，我最终摆脱了手风琴。
我经常遇到这个重绘问题，使用其他 jQuery 插件等。我最后求助于像你这样的会话变量来跟踪元素是否被重绘，并且只让组件在第一次重绘时点击 Template.mytemplate.render = function(){} 部分。使用 IronRouter，我在路由更改时取消设置变量。 Meteor 的新 Shark 分支在这些情况下应该可以很好地工作，并且很快就会推出。