Получение информации из нокаута массива js

Question

У меня есть петля foreach, откуда я получаю деньги и оригинал 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 этого флажка. поэтому я подумал, может быть, если я добавлю привязку кликов, это может дать мне orig_id, из которого каждый массив я получаю от каждой функции, но не работает. Поэтому мой вопрос заключается в том, как я могу получить orig_id каждый раз, когда человек нажимает на переключатель.

Я попытался сделать что-то подобное на js, поэтому я могу получить идентификатор orig из поля ввода флажка.

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" /> 

При необходимости здесь код переключателя DataBind

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

пожалуйста, попробовать,

Связывание Handler

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

View Model

$(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

Update

Вместо добавления функциональных возможностей к связывания обработчика, работа с 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 в вашем bindinghandler. Он будет содержать orig_id. Тем не менее, it is deprecated, так что вы должны использовать следующий параметр , который 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 
    } 
    } 
}