使用knockoutjs中的复选框列表 [英] Working with a list of checkboxes in knockoutjs

问题描述

我试图在Knockout.js附近找到我的头的复选框及其相应的值。现在，当任何未选中的复选框被选中，我需要将其值存储在一个逗号分隔的字符串。当他们取消选中时，需要从字符串中删除该值。

有任何人有关于如何使用knockoutjs实现这一点的提示？

到目前为止，我有以下代码：

ViewModel：

  $（）。ready（function（）{
 function classPreValue（preValue）
 {
 return {
 preValue：ko.observable 
} 
} 
 
 var editOfferViewModel = {
 maxNumOfVisitors：ko.observable（），
 goals：ko.observable（ 
描述：ko.observable（），
联系人：ko.observable（），
注释：ko.observable（），
 classPreValues：ko。 observableArray（[]），
 addPreValue：function（element）{
 alert（$（element）.val（））; 
 this.classPreValues.push（new classPreValue ）））; 
} 
}; 
 
 ko.applyBindings（editOfferViewModel）; 
}）; 
  

我的复选框填充了一个foreach循环：

 < input data-bind =checked：function（）{editOfferViewModel.addPreValue（this）}
 type = checked =yesvalue ='@ s'> 
 @s 
< / input> 
 

我尝试将checkbox元素作为参数传递给我的 addPreValue

任何帮助/提示都非常感谢！

$

b $ b

解决方案

检查的绑定期望传递一个可以读/写的结构。这可以是一个变量，一个可观察的或可写的dependentObservable。

当传递一个数组或observableArray时，检查的绑定知道如何添加和删除数组。

下面是一个示例，它还包括一个计算的observable，它包含以逗号分隔的值的数组。 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 =choiceTmpltype =text / html> 
< li> 
< input type =checkboxdata-bind =attr：{value：$ data}，checked：$ item.selections/> 
< span data-bind =text：$ data>< / span> 
< / li> 
< / script> 
  

I'm trying to get my head around Knockout.js and I'm quite stuck when it comes to checkboxes.

Server side I'm populating a set of checkboxes with their corresponding values. Now, when any of the unchecked checkboxes are checked, I need to store it's value in a comma-seperated string. When they're unchecked, the value needs to be deleted from the string.

Have anyone got a hint on how to achieve this with knockoutjs?

I have the following code so far:

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);
});

And my checkboxes are populated with a foreach loop:

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

I try to pass the checkbox element as the parameter to my addPreValue() function, but nothing seems to happen when I check the checkbox?

Any help/hints on this is greatly appreciated!

解决方案

The checked binding expects to be passed a structure that it can read/write against. This could be a variable, an observable, or a writable dependentObservable.

When passed an array or observableArray, the checked binding does know how to add and remove simple values from the array.

Here is a sample that also includes a computed observable that contains the array as comma delimited values. 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>

这篇关于使用knockoutjs中的复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！