Работа со списком флажков в knockoutjs - PullRequest
Новая
       14

Работа со списком флажков в knockoutjs

10 голосов
/ 18 июля 2011

Я пытаюсь разобраться с Knockout.js, и я застрял, когда дело доходит до флажков.

На стороне сервера я заполняю набор флажков с их соответствующими значениями.Теперь, когда любой из непроверенных флажков установлен, мне нужно сохранить его значение в строке, разделенной запятой.Когда они не отмечены, значение должно быть удалено из строки.

Кто-нибудь получил подсказку, как этого добиться с помощью knockoutjs?

У меня есть следующий код:

ViewModel: 

$().ready(function() {
   function classPreValue(preValue)
   {
       return {
            preValue : ko.observable(preValue)
       } 
   }

   var editOfferViewModel = {
   maxNumOfVisitors : ko.observable(""),
   goals : ko.observable(""),
   description : ko.observable(""),
   contact : ko.observable(""),
   comments : ko.observable(""),
   classPreValues : ko.observableArray([]),
   addPreValue : function(element) {
      alert($(element).val());
      this.classPreValues.push(new classPreValue(element.val()));
   }
 };

 ko.applyBindings(editOfferViewModel);
});

И мои флажки заполнены циклом foreach: 

<input data-bind="checked: function() { editOfferViewModel.addPreValue(this) }"
       type="checkbox" checked="yes" value='@s'>
    @s
</input>

Я пытаюсь передать элемент флажка в качестве параметра моему addPreValue()функция, но, кажется, ничего не происходит, когда я отмечаю этот флажок?

Любая помощь / советы по этому вопросу очень ценятся!

Ответы [ 2 ]

20 голосов
/ 18 июля 2011

Проверенная привязка ожидает, что ей будет передана структура, с которой она может читать / писать.Это может быть переменная, наблюдаемая или доступная для записи, зависящая от объекта.

При передаче массива или объекта observableArray проверенная привязка знает, как добавлять и удалять простые значения из массива.

Здесьэто образец, который также включает вычисляемую наблюдаемую область, которая содержит массив в виде значений, разделенных запятыми.http://jsfiddle.net/rniemeyer/Jm2Mh/

var viewModel = {
    choices: ["one", "two", "three", "four", "five"],
    selectedChoices: ko.observableArray(["two", "four"])
};

viewModel.selectedChoicesDelimited = ko.computed(function() {
    return this.selectedChoices().join(",");
}, viewModel);

ko.applyBindings(viewModel);

HTML: 

<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
        <span data-bind="text: $data"></span>
    </li>
</script>
2 голосов
/ 28 декабря 2013

Почему в сети нет примера с взаимоисключающими флажками

Поскольку эта ссылка появилась первой, когда я искал взаимоисключающие флажки, я поделюсь своим ответом здесь. Я бился головой о стену со всеми своими попытками. Кстати, когда вы обрабатываете событие click в связывающем in-line knockoutjs, кажется, что он отключает привязки (возможно, только потому, что я пытался вызвать функцию resetIllness, как определено ниже), даже если вы возвращаете true из функции. Может быть, есть лучший способ, но до тех пор следуй моему примеру.

Вот тип, который мне нужно связать. 

var IllnessType = function (name,title) {
    this.Title = ko.observable(title);
    this.Name = ko.observable(name);
    this.IsSelected = ko.observable(false);
};

Массив для привязки. 

model.IllnessTypes = ko.observableArray(
    [new IllnessType('IsSkinDisorder', 'Skin Disorder'),
        new IllnessType('IsRespiratoryProblem', 'Respiratory Problem'),
        new IllnessType('IsPoisoning', 'Poisoning'),
        new IllnessType('IsHearingLoss', 'Hearing Loss'),
        new IllnessType('IsOtherIllness', 'All Other Illness')]
);

Функция сброса болезни, чтобы очистить их всех. 

model.resetIllnesses = function () {
    ko.utils.arrayForEach(model.IllnessTypes(), function (type) {
        type.IsSelected(false);
    });
};

Наценка 

<ul data-bind="foreach:IllnessTypes,visible: model.IsIllness()">
    <li><label data-bind="html: Title"></label></li>
    <li><input class="checkgroup2" type="checkbox" 
data-bind="attr:{name: Name },checked:IsSelected" /></li>
</ul>

Это просто не работает

Если вы пытались вызвать функцию resetIllness, как показано ниже, вы почувствуете мою боль. 

<input type='checkbox' data-bind="checked:IsSelected, 
  click: function() { model.resetIllnesses(); return true; }" />

ты разделяешь мою боль. Ну, это работает! когда вы звоните из следующего примера. Обратите внимание, что есть класс, который я добавил выше, чтобы я мог добавить функцию щелчка.

Сценарий, который устраняет все ваши проблемы. 

<script type="text/javascript">
    $(function() {
        $(".checkgroup2").on('click', function() {
            model.resetIllnesses();
            var data = ko.dataFor(this);
            data.IsSelected(true);
        });
    });
</script>

Отправить информацию на сервер

Кроме того, в моем случае мне пришлось отправлять информацию на сервер не так, как по умолчанию в формате html, поэтому я немного изменил входные данные. 

<input class="checkgroup2" type="checkbox" data-bind="checked:IsSelected" />
<input type="hidden" data-bind="attr:{name: Name },value:IsSelected" />
...