javascript - 从数组 knockout 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。所以我在想，如果我添加点击绑定(bind)，它可能会给我从每个函数中获得的每个数组的 orig_id，但当然没有用。所以我的问题是，每次用户单击切换框时，我如何才能获得 orig_id。

我尝试在 js 上做这样的事情，所以我可以从复选框输入字段中获取原始 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 数据绑定(bind)代码

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

请试一试

绑定(bind)处理器

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>

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