Не могу заставить работать "проверено"

Question

Не могу заставить работать "проверено"

0

Я знаю, что было задано 100-е из них, но я не могу найти решение, подходящее для моего случая.

У меня есть эти переключатели:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="checked:loadFilteredHistory">1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="checked:loadFilteredHistory">2
</div>

как вы можете видеть, я пытаюсь вызвать функцию с именем loadFilteredHistory

и это так просто:

loadFilteredHistory = function(){
   console.log("I'm inside of teh function");
};

Но когда я нажимаю на радиатор, ничего не происходит. Что мне здесь не хватает? Почему я не могу назвать функцию? Я знаю, что это что-то очень маленькое, но я не могу заметить это прямо сейчас.

Slim 28 апр. 2014, в 10:27

Источник

Теги:

javascript

html

radio-button

knockout.js

5 ответов

2

Проверенная привязка данных больше подходит для синхронизации (двухсторонняя привязка) текущего значения флажка с переменной в вашей модели, если вы хотите прослушивать выбранные элементы, вы можете привязать клик, а именно:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="click:loadFilteredHistory">1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="click:loadFilteredHistory">2
</div>

Затем вам нужно создать модель с соответствующей функцией, и, наконец, вы примените эти привязки с ko.applyBindings, проходящими в вашей модели. Я добавил инструкцию console.log, чтобы показать вам, как вы можете захватить щелчок с помощью event.currentTarget.

var viewModel = {
    loadFilteredHistory: function(model, event) { 
        console.log("Inside the function");
        console.log("Clicked checkbox = " + event.currentTarget.value);
        return true;
    }
}
ko.applyBindings(viewModel);

Ludvig Gislason 28 апр. 2014, в 05:45

0

Я пытался связать щелчок, но когда я нажимаю на него, круг не получает точку выделения в нем. Функция запускается, но переключатель не помечен как выбранный :(
Slim 28 апр. 2014, в 08:09
0

Плохо, функция должна возвращать true, попробуйте мою новую версию.
Ludvig Gislason 28 апр. 2014, в 08:11

0

Является ли loadFilteredHistory методом вашего viewModel? По внешнему виду вашего фрагмента это не так.

Попробуйте что-то вроде этого:

var myViewModel = { radioButtonValue: ko.observable() } ko.applyBindings(myViewModel);

Вы также можете уточнить, что это вопрос knockout.js. знак равно

ОБНОВИТЬ:

Фактически из внешнего вида этого связывания не допускается передача функции значение. Он ожидает наблюдаемую ценность. Для радиообъектов он будет иметь новое значение для наблюдаемого. Я обновил фрагмент выше.

http://knockoutjs.com/documentation/checked-binding.html

Чтобы вызвать функцию при этом изменении, вы можете использовать myViewModel.radioButtonValue.subscribe(loadFilteredHistory)

Olga 28 апр. 2014, в 06:41

0

Вы пропустили код "/input"

<div class="left-floated-box">
    <input type="radio" id="button" name="options" value="1">1 </input>
</div>

<div class="left-floated-box">
    <input type="radio" id="button" name="options" value="2">2 </input>
</div>


$('#button').click(function() {
  alert("I'm inside of teh function");
});

Dr.Nyanpasu 28 апр. 2014, в 06:15

0

попробуй это -

$('.left-floated-box input').click(function() {
   if($('input').is(':checked')) { alert("it checked"); }
});

демонстрация

delgkp 28 апр. 2014, в 05:53

0

Отлично, но я добавлю некоторые данные для этой функции позже.
Slim 28 апр. 2014, в 07:56

Ещё вопросы

Я пытался связать щелчок, но когда я нажимаю на него, круг не получает точку выделения в нем. Функция запускается, но переключатель не помечен как выбранный :(
Плохо, функция должна возвращать true, попробуйте мою новую версию.
Отлично, но я добавлю некоторые данные для этой функции позже.

sroes · Accepted Answer · 2014-04-28T05-15-00.000Z

Я бы создал наблюдаемый для привязки к флажку:

self.selectedOption = ko.observable();

Затем подпишитесь на наблюдаемое для выполнения своих действий при изменении выбранного варианта:

self.selectedOption.subscribe(function(newValue) {
    console.log('selectedOption change', newValue);
});

Теперь вы можете просто привязать selectedOption к checked привязке привязки:

<div class="left-floated-box" >
    <input type="radio" name="options" value="1" data-bind="checked:selectedOption" />1
</div>
<div class="left-floated-box" >
    <input type="radio" name="options" value="2" data-bind="checked:selectedOption" />2
</div>

См. Http://jsfiddle.net/sjroesink/bt3mU/ для демонстрации

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