从数组淘汰js中获取信息

Question

我有一个 foreach 循环，我可以从中获取 cash 和 orig id 。 我在 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。所以我在想，如果我添加点击绑定，它可能会给我从 for each 函数中获得的每个数组的 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

更新

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

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