2014-02-21 4 views
1

Так что я пытаюсь установить значение переключателей в форме редактирования. Я попытался использовать jQuery для запуска оператора if, а затем с помощью селектора установить свойство checked. Но я думаю, я не понимаю, как работают jQuery и Template.template.helpers, потому что я никогда не мог заставить jQuery делать что-либо.Установка значения переключателя

В любом случае, я получил следующее, чтобы работать, но я просто любопытство, если это лучший способ сделать это. Это просто кажется раздутым для чего-то столь же простого, как установка значений радиокнопок в форме. Я предполагаю, что может быть пакет, который лучше подходит для бланков.

Здесь вы Javascript

Template.clientEdit.helpers({ 

    // set the radio buttons 
    isActive: function() { 
     if (this.status == "active") { 
      return "checked"; 
     } 
    }, 

    isArchived: function() { 
     if (this.status == "archived") { 
      return "checked"; 
     } 
    }, 
}); 

И HTML

<input type="radio" name="status" id="status-radio-1" value="active" {{isActive}} > 
<input type="radio" name="status" id="status-radio-2" value="archived" {{isArchived}} > 

Благодаря

ответ

4

Вы можете написать глобальный помощник Рули, чтобы использовать во всех ваших Метеор форм, например:

Handlebars.registerHelper('checked_eq', function(x, y){ 
    if (x === y){ 
    return ' checked="checked"'; 
    } 
    return '' 
}) 

И использовать его в шаблонах, как:

<input type="radio" name="status" id="status-radio-1" value="active" {{checked_eq status 'active'}} > 
<input type="radio" name="status" id="status-radio-2" value="archived" {{checked_eq status 'archived'}} > 

Вы могли бы написать что-то немного более общий, например:

Handlebars.registerHelper 'checked', (x)-> if x then ' checked="checked"' else '' 
Handlebars.registerHelper 'notChecked', (x)-> if x then '' else ' checked="checked"' 
# repeat for disabled/selected etc 

И применить преобразование тоже ваши данные/DataContext перед визуализацией шаблона:

// ... using iron-router for data contet 
data: function(){ 
    var client = Clients.findOne(this.params.clientId); 
    client.checkedActive = (client.status == 'active'); 
    client.checkedArchived = (client.status == 'archived'); 
    return client; 
} 
// ... 

// ... or apply a transform when making a list 
Template.clientList.helpers({ 
    clients: function(){ 
     return Clients.find({},{ 
     transform: function(client){ 
      client.checkedActive = (client.status == 'active'); 
      client.checkedArchived = (client.status == 'archived'); 
      return client; 
     } 
     }); 
    } 
}); 

Затем использовать в шаблонах, как:

<input type="radio" name="status" id="status-radio-1" value="active" {{checked checkedActive}} > 
<input type="radio" name="status" id="status-radio-2" value="archived" {{checked checkedArchived}} > 
+0

супер полезно. Благодарю. Я предполагаю, что хелпер-файлы Handlebar могут идти куда угодно, но есть ли наилучшая практика для организации этих файлов? – yankeyhotel

+0

Ну, лучше всего разбить любое приложение с разумным размером в пакеты! Поэтому я создаю кучу пакетов на основе 'app-xx', например' app-ui-handlebars' и размещаю соответствующие файлы там. –

0

Я работал над этим и не мог заставить его работать - очень близко, но это предотвратить шаблон от нагрузки так, основываясь на this я использовал следующее, который работал как шарм:

Template.registerHelper('checkedRadio', function(x, y){ 
    return (x === y) ? { checked: 'checked' } : null; 
}); 
Смежные вопросы