从敲除js自定义绑定中获取foreach的值

getting value of foreach from knockout js custom binding

本文关键字：获取 foreach 的值 绑定 自定义 js      更新时间：2023-10-24

我有一个foreach数据绑定，它包含这些基本信息。

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

这是交换机代码。

ko.bindingHandlers.bootstrapSwitchOn = {
    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);
        }
    }
};

我从这里得到的。https://jsfiddle.net/meno/MBLP9/通常情况下，当有复选框时，它会返回js文件中的所有信息，如orig_id和cash，就像我做了这样的一样

self.money = ko.observable();
this.clickHandler = function(item){
                    self.money(item.orig_id);
                    self.sendInfo() ;
                    }
<div data-bind="foreach : info">
            <p data-bind="$data.cash"></p>
            <p data-bind="$data.orig_id"></p>
            <input type="checkbox"  data-bind="click:$root.clickHandler"/> Click
        </div>

但是我不会使用这个自定义绑定来获取这些值。当我点击复选框并将其用作上例中的可观察对象内部时，是否有任何方法可以获得orig_id信息，并调用一个名为self.sendInfo();的函数。

请尝试以下操作，我使用了另一个指令

绑定处理程序

ko.bindingHandlers.bootstrapSwitchOn = {
                    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) {
                            /* added the two line */
                            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: 'name1'}, {cash: 2, orig_id: 'name'}, {cash: 3, orig_id: 'name3'}]);
    self.money = ko.observable();
    this.clickHandler = 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>

请注意，我调用了另一个指令Call函数，然后从绑定处理程序调用了它。

让我知道这对你的情况是否有效。

相关文章：