-1

我刚刚开始使用淘汰赛，所以如果有些东西很难看，请告诉我！

我真正想做的一件事是尽可能从 DOM 中删除 $parent、$data 等。

我已经在其他地方看到了这样做的方法，但不记得在哪里。

附上片段，如果有人能指出我正确的方向，将不胜感激。

//used to abstract out the jQuery dependancies - just in case at some point in the future jQUery is replaced with another library.
function activeClassSingle(element, standardClass, activeClass){
    $(element).siblings().removeClass(activeClass).addClass(standardClass);
    $(element).removeClass(standardClass).addClass(activeClass);
}



//helper class in a helper file
ko.bindingHandlers.buttonGroupChecked = {
    init: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = function () {
            return {
                click: function () {
                    value(allBindingsAccessor.get('val'));
                }
            }
        };
        ko.bindingHandlers.event.init(element, newValueAccessor,
        allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {          
        if (allBindingsAccessor.get("val") == ko.unwrap(valueAccessor())) {
           activeClassSingle(element, "btn-info", "btn-success");
        }        
    }
}

//raw data
 var adults = [
    {val: 1, text: "1"},
    {val: 2, text: "2"},
    {val: 3, text: "3"},
    {val: 4, text: "4"},
    {val: 5, text: "5"},
    {val: 6, text: "5+"}
    ];


//viewmodel etc.
var ViewModel = function () {
    this.adultsNo = ko.observable(2);
};

var vm = new ViewModel();
ko.applyBindings(vm);
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="btn-group btn-group-justified" data-bind="foreach: adults">
            <div class="btn btn-lg btn-info" data-bind="buttonGroupChecked: $parent.adultsNo, val: $data.val, text: $data.text"></div>
        </div>
        <span data-bind="text: adultsNo"></span>

4

1 回答 1

0

您可以通过在 html 中执行以下操作来绕过 $data：

foreach ：{数据：成人，如：“成人”}

据我所知，$parent 并不干净。唯一的方法是为数组中的每个项目定义父项目。

//used to abstract out the jQuery dependancies - just in case at some point in the future jQUery is replaced with another library.
function activeClassSingle(element, standardClass, activeClass){
    $(element).siblings().removeClass(activeClass).addClass(standardClass);
    $(element).removeClass(standardClass).addClass(activeClass);
}



//helper class in a helper file
ko.bindingHandlers.buttonGroupChecked = {
    init: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = function () {
            return {
                click: function () {
                    value(allBindingsAccessor.get('val'));
                }
            }
        };
        ko.bindingHandlers.event.init(element, newValueAccessor,
        allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {          
        if (allBindingsAccessor.get("val") == ko.unwrap(valueAccessor())) {
           activeClassSingle(element, "btn-info", "btn-success");
        }        
    }
}

//raw data
 var adults = [
    {val: 1, text: "1"},
    {val: 2, text: "2"},
    {val: 3, text: "3"},
    {val: 4, text: "4"},
    {val: 5, text: "5"},
    {val: 6, text: "5+"}
    ];


//viewmodel etc.
var ViewModel = function () {
    this.adultsNo = ko.observable(2);
};

var vm = new ViewModel();
ko.applyBindings(vm);
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="btn-group btn-group-justified" data-bind="foreach: { data: adults, as: 'adult' }">
            <div class="btn btn-lg btn-info" data-bind="buttonGroupChecked: $parent.adultsNo, val: adult.val, text: $data.text"></div>
        </div>
        <span data-bind="text: adultsNo"></span>

于 2015-03-21T05:42:51.590 回答