javascript - ノックアウトで一度に 1 つのオブジェクト要素でデータを表示する

Question

基本的なテーブル構造で、オブジェクトの配列から一連のデータを一度に 1 つずつ表示できるようにしたいと考えています。ボタンなどをクリックすると、配列内の次のオブジェクトが表示されます。

秘訣は、可視タグを使用せず、余分なデータを非表示にすることです。

Answer 1

表示する現在の要素を示すプロパティと、その要素のインデックスを指定するだけobservableArrayです..簡単なデモをチェックアウトしました。

<div id="persons"> <span data-bind="text: selectedPerson().name"></span>
    <br/>
    <button data-bind="click: showNext" id="btnShowNext">Show Next</button>
    <br/>
</div>

//JSコードはこちら

function ViewModel() {
    people = ko.observableArray([{
        name: "Bungle"
    }, {
        name: "George"
    }, {
        name: "Zippy"
    }]);
    showNext = function (person) {
        selectedIndex(selectedIndex() + 1);
    };
    selectedIndex = ko.observable(0);
    selectedPerson = ko.computed(function () {
        return people()[selectedIndex()];
    });
}
ko.applyBindings(new ViewModel());

親切にこのjsfiddleをチェックしてください