Question

我的广告复选框标签包含类名，例如“产品，产品类型和续订日期”。我正在尝试将这些绑定到结果表。如果一列是产品，另一列是产品类型，另一列是续订日期。

此刻我现在可以提取的只是输入值。但是，如何提取标签的html并将其放入表格单元格？

Codepen：http://codepen.io/anon/pen/NAVGrY

HTML：

<ul>
<li>
<input type="checkbox" value="1" data-bind="checked: selectedProduct">
<label><strong><span data-bind="product">Product A</span></strong> - <span data-bind="productType" class="productType">Product A Type</span> <span class="renewalDate">Due on <strong><span data-bind="renewalDate">18-07-17</span></strong></span></label>
  </li>
<li>
<input type="checkbox" value="2" data-bind="checked: selectedProduct">
<label><span class="product"><strong>Product B</strong></span> - <span class="productType">Product B Type</span> <span class="renewalDate">Due on <strong>12-06-17</strong></span></label>
</li>       
<li>
<input type="checkbox" value="3" data-bind="checked: selectedProduct">
<label><span class="product"><strong>Product C</strong></span> - <span class="productType">Product C Type</span> <span class="renewalDate">Due on <strong>18-07-17</strong></span></label>
</li>
</ul>

<table>
<tbody>
<tr>
  <td data-bind="text: displayedProduct"></td>
</tr>
</tbody>
</table>

使用Javascript：

var viewModel= function () {

 var self = this;

self.selectedProduct = ko.observableArray();
self.displayedProduct = ko.computed(function() {
  var str = "";
ko.utils.arrayForEach(self.selectedProduct(), function(item) {
  str += item + " ";                                
});         
return str;
});
};

ko.applyBindings(new viewModel());

Answer 1

如果您不想通过使用单独的视图模型和foreach或template绑定来敲除构建UI，则可以使用checkedValue绑定。

此绑定允许您在选中复选框时指定要存储的值：

<input type="checkbox" data-bind="checked: selectedProduct, 
                                  checkedValue: 'Product A'">

在你的例子中：

＆＃13;

var viewModel= function () {

 var self = this;

self.selectedProduct = ko.observableArray();
self.displayedProduct = ko.computed(function() {
  var str = "";
ko.utils.arrayForEach(self.selectedProduct(), function(item) {
  str += item + " ";                                
});         
return str;
});
};

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul>
<li>
<input type="checkbox" value="1" data-bind="checked: selectedProduct, checkedValue: 'Product A'">
<label><strong><span data-bind="product">Product A</span></strong> - <span data-bind="productType" class="productType">Product A Type</span> <span class="renewalDate">Due on <strong><span data-bind="renewalDate">18-07-17</span></strong></span></label>
  </li>
<li>
<input type="checkbox" value="2" data-bind="checked: selectedProduct, checkedValue: 'Product B'">
<label><span class="product"><strong>Product B</strong></span> - <span class="productType">Product B Type</span> <span class="renewalDate">Due on <strong>12-06-17</strong></span></label>
</li>       
<li>
<input type="checkbox" value="3" data-bind="checked: selectedProduct, checkedValue: 'Product C'">
<label><span class="product"><strong>Product C</strong></span> - <span class="productType">Product C Type</span> <span class="renewalDate">Due on <strong>18-07-17</strong></span></label>
</li>
</ul>

<table>
<tbody>
<tr>
  <td data-bind="text: displayedProduct"></td>
</tr>
</tbody>
</table>

＆＃13;

Answer 2

为名称，日期，值，类型和isSelected
创建一系列产品并渲染复选框，而不是硬编码的li＆＃39>
您可以使用相同的模板渲染li以及显示所选项目

在这里找到小提琴 - http://codepen.io/AnonymousDeveloper/pen/bZyLBN

HTML

$.ajax({
    url: "ajax/test.html"
})
.done(function( html ) {
    $( "#result" ).html( html );
})
.fail(function( jqXHR, textStatus ) {
    $( "#result" ).html( "Request failed: " + textStatus );
});

JS

<ul>
    <li data-bind="foreach: products">
    <input type="checkbox" data-bind="checked: isSelected, value: name"/>

<span data-bind="template: { name: 'product-template', data: $data }"></span>

  </li>

</ul>

<table>
  <tbody>
    <tr>
      Selected Items<br/>
      <span data-bind="foreach: products">
        <span data-bind="if: isSelected">
        <span data-bind="template: { name: 'product-template', data: $data }"></span>
          <br/>
        </span>
      </span>

    </tr>
  </tbody>
</table>

<script type="text/html" id="product-template">

    <label><strong><span data-bind="text:name"></span></strong> - <span data-bind="text:productType" class="productType"></span> <span class="renewalDate">Due on <strong><span data-bind="text:renewalDate"></span></strong></span></label>     

</script>

KnockoutJS绑定单选复选框标签和元素

2 个答案: