CSS，knockout.js：如何使用foreach data

编程入门行业动态更新时间:2024-10-28 21:21:17

CSS，knockout.js：如何使用foreach data-bind动态地将id分配给checkbox(CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind)

我有这个代码，我在使用knockout.js foreach绑定与使用css类中的图像设置样式的复选框。

如何单独为每个复选框动态分配id，并将标签与该动态复选框id相关联。

谁能帮我解决这个问题？

input[type=checkbox].css-checkbox1 {
  display: none;
  width: 30px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
input[type=checkbox].css-checkbox1 + label {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  cursor: pointer;
  padding-left: 30px;
  background-repeat: no-repeat;
  background: url(../images/img_sprite.png) no-repeat -14px -78px;
}
input[type=checkbox].css-checkbox1:checked + label {
  background: url(../images/img_sprite.png) no-repeat -47px -78px;
} 
  <html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
</head>

<body>
  <input type="button" value="Activity" data-bind="click: showActivity" />
  <div data-bind="if: showActivityMenu">
    <div data-bind="foreach:activity">
      <input type="checkbox" id="checkbox1" value=" " data-bind="checkedValue: name, checked:$parent.selectedActivity" class="css-checkbox1" />
      <label for="checkbox1" data-bind="text:name"></label>
    </div>
    <div style="float:right;">
      <button data-bind="click:collectActivity">OK</button>
    </div>
  </div>
  <div data-bind="ifnot: showActivityMenu">
    <span class="inner" data-bind="text:selectedActivity"> </span>	
  </div>
</body>

<script>
  function AAsearchViewModel() {
    var self = this;
    self.showActivityMenu = ko.observable(false);
    self.activity = ko.observableArray([{
      name: 'Yoga',
      val: 1
    }, {
      name: 'Pilates',
      val: 2
    }, {
      name: 'Kickboxing',
      val: 3
    }]);
    self.selectedActivity = ko.observableArray(['Pilates']);
    self.showActivity = function() {
      self.showActivityMenu(true);
    };
    self.collectActivity = function() {
      self.showActivityMenu(false);
    };
  };

  ko.applyBindings(new AAsearchViewModel());
</script>

</html> 
  
 
I have this code where I am using knockout.js foreach binding with checkboxes styled using images in css classes.  
how can I dynamically assign id to each checkbox separately and associate the label to that dynamic checkbox id. 
Can anyone help me resolve this? 
 
 
  
  input[type=checkbox].css-checkbox1 {
  display: none;
  width: 30px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
input[type=checkbox].css-checkbox1 + label {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  cursor: pointer;
  padding-left: 30px;
  background-repeat: no-repeat;
  background: url(../images/img_sprite.png) no-repeat -14px -78px;
}
input[type=checkbox].css-checkbox1:checked + label {
  background: url(../images/img_sprite.png) no-repeat -47px -78px;
} 
  <html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
</head>

<body>
  <input type="button" value="Activity" data-bind="click: showActivity" />
  <div data-bind="if: showActivityMenu">
    <div data-bind="foreach:activity">
      <input type="checkbox" id="checkbox1" value=" " data-bind="checkedValue: name, checked:$parent.selectedActivity" class="css-checkbox1" />
      <label for="checkbox1" data-bind="text:name"></label>
    </div>
    <div style="float:right;">
      <button data-bind="click:collectActivity">OK</button>
    </div>
  </div>
  <div data-bind="ifnot: showActivityMenu">
    <span class="inner" data-bind="text:selectedActivity"> </span>	
  </div>
</body>

<script>
  function AAsearchViewModel() {
    var self = this;
    self.showActivityMenu = ko.observable(false);
    self.activity = ko.observableArray([{
      name: 'Yoga',
      val: 1
    }, {
      name: 'Pilates',
      val: 2
    }, {
      name: 'Kickboxing',
      val: 3
    }]);
    self.selectedActivity = ko.observableArray(['Pilates']);
    self.showActivity = function() {
      self.showActivityMenu(true);
    };
    self.collectActivity = function() {
      self.showActivityMenu(false);
    };
  };

  ko.applyBindings(new AAsearchViewModel());
</script>

</html> 
  
 

                最满意答案
                
                    
                         您的html变得无效，因为所有复选框都具有相同的ID，并且标签的属性相同for因此当您单击任何标签时，只会检查第一个复选框。  
 解决方案是生成唯一的ID（例如，在foreach使用$index() ）：  
<input type="checkbox" data-bind="attr: { id: 'checkbox' + $index() }, checkedValue: name, checked:$parent.selectedActivity"  class="css-checkbox1"/>
<label data-bind="text:name, attr: { for: 'checkbox' + $index() }"></label>
 
 这是一个JsFiddle演示 
Your html become invalid because all checkboxes got the same id, and the labels got the same for attribute so only the first checkbox will be checked when you click on any of the labels. 
The solution will be to generate unique ids (ex. use $index() in the foreach): 
<input type="checkbox" data-bind="attr: { id: 'checkbox' + $index() }, checkedValue: name, checked:$parent.selectedActivity"  class="css-checkbox1"/>
<label data-bind="text:name, attr: { for: 'checkbox' + $index() }"></label>
 
Here is a JsFiddle Demo