KO Tree バインディング

データバインディングのオプション：

allowTriState
autoCheckNodes
autoCollapse
disabled
nodes
showCheckBoxes
showExpandCollapse

例：

この例では、ツリーと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、allowTriState、autoCheckNodes、autoCollapse、showCheckBoxes、showExpandCollapse、および nodes プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。ツリーには項目ごとにチェックボックスが表示され、展開されたノードは、別のノードが展開されると折りたたまれます。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = { disabled: ko.observable(false), allowTriState: ko.observable(true), autoCheckNodes: ko.observable(true), autoCollapse: ko.observable(true), showCheckBoxes: ko.observable(true), showExpandCollapse: ko.observable(true), nodes: ko.observableArray([ {text: 'Folder 1', expanded: true, selected: true, checked: true, nodes: [{ text: 'Folder 1.1', nodes: [ {text: 'File 1.1.1'}, {text: 'File 1.1.2'}, {text: 'File 1.1.3'}, {text: 'File 1.1.4'}, {text: 'File 1.1.5'} ] }, {text: 'File 1.2'}, {text: 'File 1.3'}, {text: 'File 1.4'}, {text: 'File 1.5'} ] }, {text: 'Folder 2', nodes: [ {text: 'File 2.1'}, {text: 'File 2.2'}, {text: 'File 2.3'}, {text: 'File 2.4'}, {text: 'File 2.5'} ] }, {text: 'Folder 3', nodes: [ {text: 'File 3.1'}, {text: 'File 3.2'}, {text: 'File 3.3'}, {text: 'File 3.4'}, {text: 'File 3.5'} ] }, {text: 'File 4'}, {text: 'File 5'} ]) };

ViewModel スクリプト

コードのコピー

var viewModel = {
    disabled: ko.observable(false), 
    allowTriState: ko.observable(true), 
    autoCheckNodes: ko.observable(true), 
    autoCollapse: ko.observable(true), 
    showCheckBoxes: ko.observable(true), 
    showExpandCollapse: ko.observable(true), 
    nodes: ko.observableArray([     
        {text: 'Folder 1',     
        expanded: true, 
        selected: true,     
        checked: true,     
        nodes: [{     
            text: 'Folder 1.1', 
            nodes: [     
                {text: 'File 1.1.1'},
                {text: 'File 1.1.2'},
                {text: 'File 1.1.3'},
                {text: 'File 1.1.4'},
                {text: 'File 1.1.5'}
            ] },
            {text: 'File 1.2'},
            {text: 'File 1.3'},
            {text: 'File 1.4'},
            {text: 'File 1.5'}
        ] },
        {text: 'Folder 2', 
            nodes: [
                {text: 'File 2.1'},
                {text: 'File 2.2'},
                {text: 'File 2.3'},
                {text: 'File 2.4'},
                {text: 'File 2.5'}
            ] 
        },
        {text: 'Folder 3', 
                nodes: [
                    {text: 'File 3.1'},
                    {text: 'File 3.2'},
                    {text: 'File 3.3'},
                    {text: 'File 3.4'},
                    {text: 'File 3.5'}
                ] 
        }, 
        {text: 'File 4'}, 
        {text: 'File 5'}
    ]) 
};

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<ul data-bind="wijtree: { disabled: disabled, allowTriState: allowTriState, nodes: nodes, autoCheckNodes: autoCheckNodes, autoCollapse: autoCollapse, showCheckBoxes: showCheckBoxes, showExpandCollapse: showExpandCollapse }"></ul>

ビューのマークアップ

コードのコピー

<ul data-bind="wijtree: {
                disabled: disabled,
                allowTriState: allowTriState,
                nodes: nodes,
                autoCheckNodes: autoCheckNodes,
                autoCollapse: autoCollapse,
                showCheckBoxes: showCheckBoxes,
                showExpandCollapse: showExpandCollapse
                }"></ul>

関連トピック