2

RP Niemeyer の kendo-knockout ライブラリを使用しています。ノックアウト オブザーバブルで dataSource を使用して kendoTreeView を実行しています。

html:

<div id="main">
    <div id="reportGrid" data-bind="kendoTreeView: { dataSource: treeViewDataSource }">      </div>
  <button data-bind="click: addItem">Add</button>
</div>>

JavaScript:

var billingReportViewModel = ko.observable({
    treeViewDataSource: ko.observableArray([{text: "Tea" },{ text: "Coffee" }]),
    addItem : function () {
    this.treeViewDataSource.push({text: "Water"});
    alert(this.treeViewDataSource().length);
    }

});

ko.applyBindings(billingReportViewModel);

追加ボタンをクリックすると、監視可能な配列に新しい要素が追加されます。アイテムは追加されますが、それに応じてビューが更新されません。

ここから次の手順に従います。

Kendo-Knockout: Kendo データソースでノックアウト ビュー モデルを使用する

私は何か間違ったことをしていますか？または、この機能は現在サポートされていませんか? もしそうなら、私の選択肢は何ですか？ノードを追加/削除/更新するたびにDOMからツリービューを削除し、新しいデータソースで再作成することがあります。しかし、バインディングが機能するか、より柔軟なソリューションが機能することを願っています。ありがとう！

jsFiddle:

http://jsfiddle.net/6SEzp/42/

アップデート：

次のようなウィジェットへの参照を使用して、treeView をロードすることもできました。

html:

<div data-bind="kendoTreeView: { widget: myWidget}">

</div>

<button data-bind="click: initialize">Initialize</button>

JavaScript:

var ViewModel = function () {

    this.initialize = function () {

        var inline = new kendo.data.DataSource({
            data: [
            { id: 1, text: "Tea", sprite: "icon-tea" },
            { id: 2, text: "Coffee", sprite: "icon-coffee" }
        ]
        });

        var widget = this.myWidget();
        widget.setDataSource(inline);
    };

    //hold the widget
    this.myWidget = ko.observable();
};

ko.applyBindings(new ViewModel());

このアプローチを使用して、ツリービューのアイテムを追加、削除、および更新したいと考えています。データソースを操作するようなことを考えinlineており、それに応じてビューが更新されることを願っています (上記の元の投稿からの観測可能なデータソースのアイデアのようなもの)。どうやってやるの ？どんな実例も素晴らしいでしょう！

4

1 に答える 1

2

ドキュメントによると、一番外側の ul 要素にノックアウト剣道 TreeView を追加する必要があります。また、kendo.data.DataSource を使用する代わりに、標準のノックアウト手法を使用して、ネストされた ul 要素と li 要素を追加するだけです。

更新: アイテムの追加ボタンを追加しました。ノードが追加されましたが、剣道スタイルはありません。ノックアウト ノードを再バインドするためのハックを追加しました。 

// Here's my data model
var node = function(title){
    this.title = ko.observable(title);
    this.children = ko.observableArray();
    
}
var ViewModel = function() {
  this.tvWidget = ko.observable();
    this.children = ko.observableArray([new node('a'), new node('b'), new node('c')]);
    this.children()[0].children([new node('d'), new node('e'), new node('f')]);
    this.children()[0].children()[1].children([new node('d'), new node('e'), new node('f')]);
    this.children()[2].children([new node('d'), new node('e'), new node('f')]);
  
};


ViewModel.prototype.addItem = function() {
     this.children.push(new node('n'));
     this.children()[0].children.push(new node('n'));
    ko.cleanNode(document.getElementById('treeviewdiv'))
ko.applyBindings(vm, document.getElementById('treeviewdiv'))
};
 
var vm = new ViewModel();
ko.applyBindings(vm);
<link href="http://rniemeyer.github.io/knockout-kendo/css/kendo.default.min.css" rel="stylesheet"/>
<link href="http://rniemeyer.github.io/knockout-kendo/css/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>


<div id="treeviewdiv">   
    <ul data-bind="kendoTreeView: {widget: tvWidget}, template:  { name: 'node-template', foreach: children }"></ul>
</div>

<button data-bind="click: addItem">Add item</button>

<script type="text/html" id="node-template">
    <li>
        <span data-bind="text: title"></span>
        <ul data-bind="template: { name: 'node-template', foreach: children }"></ul>
    </li>
</script>

于 2015-01-26T15:06:02.370 に答える