Question

我有一个foreach循环，从我获得现金和原始。我在p标签后面使用了一个复选框，复选框只返回true或false。

<div data-bind="foreach : info">
<p data-bind="$data.cash"></p>
<p data-bind="$data.orig_id"></p>
<input type="checkbox"  data-bind="Switch: $root.on_off"/>
</div>

我想要做的是使用复选框来更改数据库中的内容，所以基本上我需要获取该复选框的orig_id。所以我想也许如果我添加点击绑定它可能会给我orig_id，其中我从每个函数得到的每个数组，但没有工作。所以我的问题是每次用户点击开关盒时如何获得orig_id。

我尝试在js上做这样的事情，所以我可以从复选框输入字段中获取orig ID。

self.sendCheckBoxInfo = function( data, event){
            alert(data.orig_id);
        }

<div data-bind="foreach : info">
<p data-bind="$data.cash"></p>
<p data-bind="$data.orig_id"></p>
<input type="checkbox"  data-bind="Switch: $root.on_off, click :    $root.sendCheckBoxInfo"  />

此处需要的是Switch数据绑定代码

ko.bindingHandlers.Switch = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $elem = $(element);
        $(element).bootstrapSwitch();
        $(element).bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switch-change', function (e, data) {
            valueAccessor()(data.value);
        }); // Update the model when changed.
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var vStatus = $(element).bootstrapSwitch('state');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapSwitch('setState', vmStatus);
        }
    }

Answer 1

请试试，

绑定处理程序

ko.bindingHandlers.Switch  = {
                    init: function (element, valueAccessor, allBindingsAccessor, data, context) {
                        var observable = valueAccessor();
                        console.log(observable);
                        $elem = $(element);
                        $(element).bootstrapSwitch();
                        $(element).bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
                        $elem.on('switch-change', function (e, data) {
                            var observable = valueAccessor();
                            allBindingsAccessor.get('callFunction').call(context, observable);
                        }); // Update the model when changed.
                    },
                    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                        var vStatus = $(element).bootstrapSwitch('state');
                        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
                        if (vStatus != vmStatus) {
                            $(element).bootstrapSwitch('setState', vmStatus);
                        }
                    }
                };

查看模型

$(function () {
                var vm = function () {
                    var self = this;
                    this.info = ko.observableArray([{cash: 1, orig_id: 'org1'}, {cash: 2, orig_id: 'org2'}, {cash: 3, orig_id: 'org3'}]);
                    self.money = ko.observable();
                    this.sendCheckBoxInfo  = function (item) {
                        console.log(item);
                    }
                    self.sendInfo = function () {

                    }
                };

<强> HTML

<div data-bind="foreach : info">
  <p data-bind="$data.cash"></p>
  <p data-bind="$data.orig_id"></p>
  <input type="checkbox"  class="mySwitch" data-bind="bootstrapSwitchOn : $data,callFunction:$root.clickHandler"/>
</div>

我使用了另一个指令来添加你的调用函数。让我知道。

Answer 2

<强>更新

不是向绑定处理程序添加功能，而是使用viewmodel来完成您想要执行的操作。如果要在选中复选框时执行某些操作，则可以订阅受复选框限制的变量。这是一个简单的例子：

function doSomething(item) {
  vm.thingsDone.push('Done ' + item.orig_id());
}

function item(cash, orig_id) {
  var result = {
    cash: ko.observable(cash),
    orig_id: ko.observable(orig_id),
    selected: ko.observable(false)
  };

  result.selected.subscribe(function(newValue) {
    if (newValue) {
      doSomething(result);
    }
  });

  return result;
}

var vm = {
  items: ko.observableArray([
    item(10, 1),
    item(20, 2),
    item(30, 3)
  ]),
  thingsDone: ko.observableArray()
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach:items">
  <div>
    <input type="checkbox" data-bind="checked: selected" />
    <span data-bind="text: cash"></span>
  </div>
</div>
<div data-bind="foreach: thingsDone">
  <div data-bind="text: $data"></div>
</div>

您的绑定处理程序中有一个viewModel参数。它将包含orig_id。但是，it is deprecated，您应该使用 next 参数，即bindingContext

viewModel - 在Knockout 3.x中不推荐使用此参数。使用   bindingContext。$ data或bindingContext。$ rawData访问视图   而不是模型。

bindingContext - 保存绑定的对象   该元素的绑定可用的上下文。该对象包括   特殊属性，包括$ parent，$ parents和$ root   用于访问绑定到此上下文的祖先的数据。

所以你会做这样的事情：

ko.bindingHandlers.Switch = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    ///...same as before...,
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var vStatus = $(element).bootstrapSwitch('state');
    var vmStatus = ko.utils.unwrapObservable(valueAccessor());
    if (vStatus != vmStatus) {
      $(element).bootstrapSwitch('setState', vmStatus);
      //** Do something with bindingContext.$data.orig_id
    }
  }
}

从数组淘汰赛中获取信息

2 个答案: