1

私はノックアウトを学んでいて、この例に出くわしました..

HTML/ビュー:

<h2>Not sorted</h2>
<ul data-bind="template: { name: 'instanceTmpl', foreach: instances }"></ul>

<hr/>
<h2>Sorted</h2>
<ul data-bind="template: { name: 'instanceTmpl', foreach: sortedInstances }"></ul>

<script id="instanceTmpl" type="text/html">
    <li>
        <span data-bind="text: id"></span>
        <input data-bind="value: FirstName" />
    </li>
</script>

JavaScript/ViewModel:

function Instance(id, name) {
    return {
        id: ko.observable(id),
        FirstName: ko.observable(name)
    };
}

var viewModel = {
    instances: ko.observableArray([
        new Instance(1, "Zed"),
        new Instance(2, "Jane"),
        new Instance(3, "John"),
        new Instance(4, "Anne"),
        new Instance(5, "Ted")
    ])
};

viewModel.sortFunction = function (a, b) {
    return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1;
};

viewModel.sortedInstances = ko.dependentObservable(function () {
    return this.instances.slice().sort(this.sortFunction);
}, viewModel);


ko.applyBindings(viewModel);

ボタンを追加して変更を試みましたが、そのボタンのクリックを使用してソートされていないアイテムをソートしたいと思います。お気に入り

<button data-bind="click: sortedInstances">Sort</button>

うまくいきませんでした。テンプレートをボタンクリックにバインドする方法を誰か説明してもらえますか?

4

1 に答える 1

2

観測可能な配列の内容を並べ替える関数をビューモデルに追加しsort、観測可能な配列を新しい並べ替えられた配列で更新することで、これを実現できます。

var viewModel = {
    instances: ko.observableArray([
    new Instance(1, "Zed"),
    new Instance(2, "Jane"),
    new Instance(3, "John"),
    new Instance(4, "Anne"),
    new Instance(5, "Ted")])
};

viewModel.sort = function () {
    var unsorted = viewModel.instances();

    viewModel.instances(unsorted.sort(viewModel.sortFunction));
};

viewModel.sortFunction = function (a, b) {
    return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1;
};

次に、クリック時に配列をソートするボタンを作成できます。

<button data-bind="click: sort">Sort</button>

例: http://jsfiddle.net/CCNtR/24/

于 2013-04-23T23:50:59.047 に答える