JS

Question

所以免责声明我在淘汰赛中非常可怕。我想要做的是我在这里用jquery做什么而不是使用knockout.I被告知使用点击事件将是一个很好的方式去。任何提示/帮助都会很棒！

HTML

<div id="1" class="profile">
1
</div>
<div id="2"  class="profile">
2
</div>
<div id="3"  class="profile">
3
</div>
<div id="4"  class="profile">
4
</div>
<div id="5"  class="profile">
5
</div>
<div id="6"  class="profile">
6
</div>
<input type="button" value="Save" id="save-button"/>
<div style="clear:both;">Number Of Points</div>
<div id="output"></div>

CSS

.profile{
width: 50px;
height: 80px;
color: #FFF;
background: black;
border: 1px solid #FFF;
float: left;

}
.highlight {
background: yellow !important;
border:1px solid #000;
color: black;
}

的Javascript

$("div").click(function () {
  $(this).toggleClass("highlight");
});

$('#save-button').click(function(){
$('#output').html('');
$('div.highlight').each(function(){
    $('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});

这是我到目前为止（使用jquery not knockout） http://jsfiddle.net/grahamwalsh/VFNss/

Answer 1

你可以这样做（对不起，它使用计算的下划线，但这使它更简单一点）：

HTML：

<div style="clear:both; height: 150px;">
<div data-bind="foreach: items">
    <div class="profile" data-bind="text: name, click: clickme, enable: active, css:{highlight: active()}"></div>
</div>
</div>
<hr>
<h2>Selected Items</h2>
<div data-bind="foreach: selectedItems">
    <div data-bind="text: name"></div>
</div>
<input type="button" data-bind="click: save" value="Save">

JS

function Step(number) {
    this.active = ko.observable(false);
    this.name = ko.observable("Point " + number);

    this.clickme = function () {
        this.active(!this.active());
    };
}

var model = function () {
    var items = ko.observableArray([new Step(1), new Step(2), new Step(3), new Step(4)]);
    var selectedItems = ko.computed(function () {
        return _.filter(items(), function (item) {
            return item.active();
        });
    })

    var save = function () {
        alert("sending items \n" + ko.toJSON(selectedItems()));
    }

    return {
        items: items,
        selectedItems: selectedItems,
        save: save
    }
}

ko.applyBindings(model);

CSS

.profile {
    width: 50px;
    height: 80px;
    color: #FFF;
    background: black;
    border: 1px solid #FFF;
    float: left;
}
.highlight {
    background: yellow !important;
    border:1px solid #000;
    color: black;
}

（Fiddle）

Answer 2

这是使用内置Knockout数组函数而不是Underscore.js（see fiddle）的另一种（简单化）替代方法：

HTML

<!-- ko foreach: numbers -->
<div class="profile" data-bind="text: val, click: $root.clicked"></div>
<!-- /ko -->

<button type="button" data-bind="click: save">Save</button>
<div style="clear:both;">Number Of Points</div>
<div id="output" data-bind="foreach: highlightedNumbers">
    <div data-bind="text: val"></div>
</div>

JS

var numberdata = [{ val: '1', highlight: false },{ val: '2', highlight: false },{ val: '3', highlight: false },
                 { val: '4', highlight: false },{ val: '5', highlight: false },{ val: '6', highlight: false }];

function Number(data){
    this.val = ko.observable(data.val);
    this.highlight = ko.observable(data.highlight);
};

function viewmodel(){
    var self = this;
    this.numbers = ko.observableArray();

    this.highlightedNumbers = ko.computed(function(){
        var items = [];      
        ko.utils.arrayForEach(this.numbers(), function(num){          
            if(num.highlight())items.push(num);
        });

        return items;
    }, this);

    this.loadData = function(data){
        $.each(data, function(index, num){
            self.numbers.push(new Number(num));
        });
    };

    this.clicked = function(num, e){       
        var status = !num.highlight(),
            $div = $(e.target);

        num.highlight(status);

        if(status)$div.addClass('highlight');
        else $div.removeClass('highlight');
    }

    this.save = function(){
        // not implemented
    };

};

var vm = new viewmodel();
vm.loadData(numberdata);

ko.applyBindings(vm);

如何用knockout.js做到这一点

2 个答案:

JS

CSS

（Fiddle）

HTML

JS