從陣列淘汰中獲取信息js

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

如果在這裏需要的是交換機數據綁定代碼

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>

您的bindinghandler一個viewModel參數。它將包含orig_id。然而，it is deprecated，所以你應該使用下一個參數，這是bindingContext

視圖模型 - 這個參數在淘汰賽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 
    } 
    } 
}