使用Knockout自定义绑定更新JSTree
Updating a JSTree using Knockout Custom Binding
我正在尝试创建一个JSTree接口,该接口使用Knockout JS作为项目的视图模型。
我希望能够通过视图模型创建/重命名/删除节点,其中JSTree"building"发生在自定义绑定中。我很难弄清楚如何访问视图模型中的jstree(同时保持ui解耦),以便对节点进行CRUD。
我显然不想将新对象推送到数组中,但这样做是为了证明observableArray([])可以用于数据。
http://jsfiddle.net/ascendantofrain/76cco3cs/41/
HTML
<div class="wrapper">
<div class="button-wrapper">
<button type="button" class="btn btn-success btn-sm" data-bind="click: $root.createFolder">Create Folder</button>
<button type="button" class="btn btn-success btn-sm" data-bind="click: $root.createFile">Create File</button>
<button type="button" class="btn btn-warning btn-sm" data-bind="click: $root.rename">Rename</button>
<button type="button" class="btn btn-danger btn-sm" data-bind="click: $root.delete">Delete</button>
</div>
<pre data-bind="text: treeData"></pre>
<div id="jstree_demo_div" data-bind="jstree: { data: treeData }"></div>
<!-- <div id="jstree_demo_dev_attributes">
<ul>
<li>Attribute Reporting Group
<ul>
<li>Invoice Dates</li>
</ul>
</li>
</ul>
</div> -->
</div>
淘汰JS
function tree() {
var self = this;
self.createFolder = function (data) {
self.treeData.push({
'id': 'iPhone',
'parent': 'device',
'text': 'iPhone',
'type': 'default'
});
};
self.createFile = function (data) {
self.treeData.push({
'id': 'ios8',
'parent': 'iPhone',
'text': 'iOS 8',
'type': 'file'
});
};
self.rename = function (data) {
};
self.delete = function (data) {
};
self.treeData = ko.observableArray([
{ 'id': 'animal', 'parent': '#', 'text': 'Animals' },
{ 'id': 'device', 'parent': '#', 'text': 'Devices' },
{ 'id': 'dog', 'parent': 'animal', 'text': 'Dogs' }
]);
};
ko.bindingHandlers.jstree = {
buildTree: function (element, treeData) {
$(element).jstree('destroy');
$(element).jstree({
'core': {
'animation': 0,
'check_callback': true,
'data': treeData
},
'types': {
'#': {
'max_depth': 4,
'valid_children': ['root']
},
'level_1': {
'valid_children': ['default']
},
'level_2': {
'valid_children': ['file']
},
'file': {
'icon': 'glyphicon glyphicon-file'
}
},
'plugins': [
'search',
'state',
'types',
'wholerow',
'unique'
]
});
},
update: function (element, valueAccessor) {
var treeData = ko.unwrap(valueAccessor());
ko.bindingHandlers.jstree.buildTree(element, treeData.data());
}
};
ko.applyBindings(new tree());
这太晚了,但请看一下:http://jsfiddle.net/u4a7k5zu/20/
这是你小提琴的改良版。不确定这是否是你想要的。不过你可能已经想明白了。也许它可以帮助其他人。
小提琴编码:
function tree() {
var self = this;
//display actions in fiddle
self.consoleLine = "<p class='"console-line'"></p>";
self.consoleLog = function (text) {
$("#console-log").append($(self.consoleLine).html(text));
};
self.clearConsoleLog = function () {
$("#console-log").html('');
};
self.tree = $('#jstree_demo_div'); //get jstree div
self.isNodeSelected = ko.observable(false);
self.selectedNode = ko.observable({});
//deselect all nodes
self.deselectAllNodes = function () {
self.tree.jstree('deselect_all');
}
//keep track of selected node
self.tree.on("changed.jstree", function (e, data) {
var node = self.tree.jstree().get_selected(true)[0]; //get current selected node
if (typeof node !== 'undefined') {
self.isNodeSelected(true);
self.selectedNode(node);
self.consoleLog('selected node id: ' + node.id + ', type: ' + node.type);
} else {
self.isNodeSelected(false);
}
});
self.createFolderNode = function (data) {
//node can be created on a preselected node or pass # to create a root node
var node;
var data;
if (self.isNodeSelected())
{
node = self.selectedNode();
data = {'id': Math.floor((Math.random() * 10000) + 1),
'text': 'iPhone', 'type': 'folder'};
}
else
{
node = '#';
data = {'id': Math.floor((Math.random() * 100000) + 1),
'parent': '#',
'text': 'New Root Node',
'type' : 'root'
};
}
//create node
var id = self.tree.jstree("create_node", node, data, 'last');
self.tree.jstree('open_node', node);
self.tree.jstree('edit', id);
};
self.createFileNode = function (data) {
//Below code only allows files to be created within folders.
//Structure it as per createFolder method to create files at root
var data = {
'id': Math.floor((Math.random() * 100000) + 1),
'text': 'iOS 8',
'type': 'file'
}
//create file node
var id = self.tree.jstree("create_node", self.selectedNode(), data, 'last');
self.tree.jstree('open_node', self.selectedNode());
self.tree.jstree('edit', id);
};
self.renameNode = function (data) {
if(self.isNodeSelected()){
self.tree.jstree('edit', self.selectedNode());
}
else{
alert('please select a node to rename!');
}
};
self.deleteNode = function (data) {
if(self.isNodeSelected()){
self.tree.jstree('delete_node', self.selectedNode());
}
else{
alert('please select a node to delete!');
}
};
self.treeData = ko.observableArray([{
'id': 1,
'parent': '#',
'text': 'Animals',
'type': '#'
}, {
'id': 2,
'parent': '#',
'text': 'Devices',
'type' : '#'
}, {
'id': 'dog',
'parent': 1,
'text': 'Dogs',
'type' : 'folder'
}]);
};
ko.bindingHandlers.jstree = {
buildTree: function (element, treeData) {
$(element).jstree('destroy');
$(element).jstree({
'core': {
'animation': 0,
'check_callback': true,
'data': treeData
},
'types': {
'#': {
'max_children': 10,
'max_depth': 10,
'valid_children': ['root', 'folder','file']
},
'folder': {
'valid_children': ['folder','file']
},
'file': {
'icon': 'glyphicon glyphicon-file',
'max_depth': 0
}
},
'plugins': [
'search',
'state',
'types',
'wholerow']
});
},
update: function (element, valueAccessor) {
var treeData = ko.unwrap(valueAccessor());
ko.bindingHandlers.jstree.buildTree(element, treeData.data());
}
};
ko.applyBindings(new tree());
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- 在jstree中,如何将指定的节点集中到大型树上
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 从选项页面更新chrome扩展清单权限
- 如何在不刷新页面的情况下更新显示框
- 通过链接重定向不;我不在jstree中工作
- 延期承诺值未更新/解析/延期
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用Knockout自定义绑定更新JSTree