Список переключателей внутри шаблона jquery с использованием нокаута - PullRequest
Новая
       17

Список переключателей внутри шаблона jquery с использованием нокаута

2 голосов
/ 15 ноября 2011

Я использую нокаут с шаблоном jquery, я застрял в каком-то месте в моем шаблоне.Позвольте мне сначала показать вам код.Вот мой шаблон 

 <script type="text/x-jquery-tmpl" id="questionTemplate">
        <div class="questions">
               <div data-bind="text: QuestionText" style="font-weight:bold;"></div>
               {{if QuestionType == "FreeForm" }}
                       <textarea rows="3" cols="50" data-bind="value: ResponseValue"></textarea>
                   {{/if}}

                   {{if QuestionType != "FreeForm" }}
                       <table>
                        {{each(i,option) Options}}
                        <tr>
                       <td>
                       <input type="radio" data-bind="attr:{name:QuestionId},click:function(){ResponseValue=option.Value;}" />${option.Value}</td><td>- ${option.ResponsePercent} %</td> 
                       </tr>
                        {{/each}}
                       </table>    
                   {{/if}} 
            </div>
    </script>

А вот как я его использую 

<div data-bind="template:{name:'questionTemplate',foreach:questionResponses()}">

Так что в основном он делает, он зацикливается для каждого ответа на вопрос и проверяет, если тип вопросаэто FreeForm, тогда он создает текстовую область, иначе он выбирает свойство массива объекта QuestionResponse «Опции» и использует jquery {{each}}, чтобы показать каждую опцию в качестве переключателя.И при отправке я выбираю значение свойства «ResponseValue», если это textarea, то я получаю значение textarea или в противном случае я получаю значение выбранного переключателя.Это все работает отлично.

Вот как это выглядит в пользовательском интерфейсе 

1. Tell me about yourself
[A Text Area Since it is a FreeForm Question]

2. How much you will rate yourself in MVC3?
RadioButton1
RadioButton2
RadioButton3

3. Blah Blah Blah?
RadioButton1
RadioButton2
RadioButton3
RadioButton4
RadioButton5
RadioButton6


... so.. on..

В настоящее время я назначаю "QuestionId" в качестве имени для радио-кнопок, чтобы сделать их взаимоисключающимив вопросе.Итак, второй вопрос: все 3 переключателя будут иметь имя name = "111-1111-1111".И третий вопрос: все 6 переключателей будут иметь имя name = "222-2222-2222". Примечание - QuestionId имеет тип Guid

Единственная и небольшая проблема, которая застряла у меня, это не позволяет мне изменить мойвыбор, я имею в виду, скажем, если я выберу RadioButton1 для вопроса 2, то он не позволяет мне выбрать RadioButton2 или 3, то же самое касается каждого вопроса.Это происходит в Firefox.В то время как IE 9 даже не позволяет выбрать любую из переключателей на странице.

Любая помощь будет заметна

Заранее спасибо

1 Ответ

7 голосов
/ 15 ноября 2011

Лучше всего использовать привязку checked с вашими переключателями.Ваша привязка будет выглядеть примерно так: 

<input type="radio" data-bind="attr:{name:QuestionId, value: option.Value }, checked: $data.ResponseValue" />${option.Value}</td>
  • Атрибут name гарантирует, что они взаимоисключающие в вопросе.
  • Атрибут value определяет, что привязка checked будет использовать для своего значения
  • Привязка checked установит option.Value со значением опции

Вот пример: http://jsfiddle.net/rniemeyer/ncERd/

...