动态创建绑定到可观察数组内的observable的复选框是不行的

时间:2017-11-25 20:05:55

标签: javascript jquery html checkbox knockout.js

我一直在玩KnockoutJS,以便更好地了解它是如何工作的,最终导致一些非常规的编码。

这是剧本:

var ViewModel = function() {
    var self = this;

    self.counter = ko.observable(0);
    self.someFruits = ko.observableArray();

    self.createbox = function (){
        var value = {
            name: self.counter(),
            isChecked: ko.observable(true)
        };

        self.someFruits.push(value);

        $("#div1").append('<div><input type="checkbox" data-bind="checked: someFruits()[' + self.counter() + '].isChecked" /> Cherry</div>');

        $("#div2").append('<div><input type="checkbox" data-bind="checked: someFruits()[' + self.counter() + '].isChecked" /> Cherry</div>');

        self.counter(self.counter() + 1);
    }
};

ko.applyBindings(new ViewModel()); 

这是HTML:

<div>
    <div>
        <button data-bind="click: createbox" type="button" class="btn btn-warning">Create Box</button>
    </div>

    <div id="div1">
    </div>
    <br>
    <br>
    <div id="div2">
    </div>
</div>

我尝试模拟的是动态创建复选框的功能,该复选框将数据绑定到observable-array中的可观察对象。所以我创建了一个按钮,push一个新对象,其中包含ko.observableobservableArray。然后使用Jquery附加HTML标记以创建新的复选框。我每次向不同的div添加两个相同的复选框,只是为了查看它们是否根据绑定对象进行更新。

这是野蛮的,理想情况下,我不应该将JQuery用于这些目的,也许foreach在这里会很好。但是,我仍然想知道为什么在我认为应该这样做时这不起作用。

编辑:例如,如果我单击按钮3次,将为每个div创建3个复选框,使其在enitre页面中共有6个复选框。如果我选中第一个id=div1中的第一个复选框,则id=div2中的第一个复选框也应该同等更新。我一直在使用JSFiddle对其进行测试,并且单击其对应项时复选框不会自动更新。

1 个答案:

答案 0 :(得分:2)

在淘汰赛中,你很少需要使用jquery从UI中追加/删除东西。您的viewModel应该控制所有添加,删除或任何类型的DOM操作。在您的情况下,您正在推动someFruits observableArray。使用foreach绑定来显示它们。

因此,在下面的代码片段中,我添加了一个输入来添加新的水果。此外,还有computed属性,当您更改复选框时,会显示“已检查”的水果。

var ViewModel = function() {
  var self = this;
  self.fruitName = ko.observable();
  self.someFruits = ko.observableArray([]);

  self.createbox = function() {
    self.someFruits.push({
      name: self.fruitName(),
      isChecked: ko.observable(true)
    });

    // clear the input after a fruit is added
    self.fruitName('');
  }

  // every time "someFruits" or "isChecked" changes this gets computed again
  self.checkedFruits = ko.computed(function() {
    return self.someFruits()
      .filter(a => a.isChecked())
      .map(b => b.name);
  })
};

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  <div>
    <input data-bind="value: fruitName" />
    <button data-bind="click: createbox" type="button" class="btn btn-warning">Create Box</button>
  </div>

  <div id="div1" data-bind="foreach:someFruits">
    <div>
      <input type="checkbox" data-bind="checked: isChecked" />
      <span data-bind="text: name"></span>
    </div>
  </div>
  <br> Selected fruits:

  <span data-bind="text: checkedFruits"></span>
</div>

点击Run Code snippet进行测试。 Here's a fiddle如果你想玩它。如果你正在学习淘汰赛,我认为最好不要在一段时间内包括jquery:)