从淘汰赛js自定义绑定获得foreach的价值

时间:2016-03-31 18:38:15

标签: javascript jquery knockout.js

我有一个foreach databind,它有这个基本信息。

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

我从这里得到的。Key-Value Coding Programming Guide 通常情况下,当有复选框时,它会返回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>

但我没有使用此自定义绑定获取这些值。 当我单击复选框并在上面的示例中将其用作observable内部并且还调用名为orig_id的函数时,有什么方法可以获取self.sendInfo();信息。

1 个答案:

答案 0 :(得分:0)

请尝试以下内容,我使用了另一个指令,

绑定处理程序

#ffffff

查看模型

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

<强> HTML

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

    }
 };

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

如果您的情况有效,请告诉我。