Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
backbone-tree-model
Advanced tools
Readme
Tree data structure using Backbone Model and Collection
install the node module
npm install backbone-tree-model
then use it in your app
var BackboneTreeModel = require('backbone-tree-modle');
var tree = new BackboneTreeModel(treeObject);
see test/index.html
just append reference to src/backbone.treemodel.js
on your page after underscore and Backbone, then
var tree = new BackboneTreeModel(treeObject);
or
var tree = new Backbone.TreeModel(treeObject);
see test/amd.html
<script src="require.js"></script>
<script>
requirejs.config({
paths: {
jquery: 'path/to/jquery',
backbone: 'path/to/backbone',
underscore: 'path/to/underscore',
treemodel: 'path/to/backbone.treemodel',
}
});
define(['treemodel'], function(TreeModel) {
var tree = new TreeModel(treeObject);
});
</script>
var treeObject = {
tagname: 'body',
nodes: [
{
id: 'sidebar',
tagname: 'div',
width: 300,
nodes: [
{ tagname: 'p' },
{ tagname: 'span' }
]
},
{
id: 'content',
tagname: 'div',
width: 600,
nodes: [
{ tagname: 'div' },
{
tagname: 'p',
nodes: [
{
tagname: 'anchor',
nodes: [
{ tagname: 'span' }
]
}
]
}
]
}
]
};
var tree = new Backbone.TreeModel(treeObject);
tree.get('tagname'); // returns "body", `tree` is a backbone model
var nodes = tree.nodes(); // `nodes` is a backbone collection
var sidebar = nodes.first(); // `sidebar` is a backbone model
sidebar.get('width'); // 300
tree.find('sidebar').next().id; // "content"
tree.find('content').prev().id; // "sidebar"
// node hierarchy
(sidebar.parent() === tree) // true
(sidebar.root() === tree) // true
tree.isRoot(); // true
tree.contains(sidebar); // true
sidebar.contains(tree); // false
var content = tree.find('content'); // `find` returns unique node
var paragraphNode = tree.findWhere({tagname: 'p'}); // `findWhere` returns first match
var paragraphNodes = tree.where({tagname: 'p'}); // `where` returns all matches
// TreeModel nodes inherit from Backbone Models
content.get('tagname'); // "div"
content.where({ tagname: 'p'}).length; // 1
tree.where({ tagname: 'p' }).length; // 2
// Recursive-where for TreeCollection
var nodes = tree.nodes();
nodes.where({tagname: 'div'}).length; // 2
nodes.where({tagname: 'div'}, {deep: true}).length; // 3
// Special mixed TreeModel node Array
var specialArray = tree.where({tagname: 'div'}); // Array with standard methods (push/pop/splice/etc.)
specialArray.length; // 3
var array2 = specialArray.where({tagname: 'span'}); // has where method and returns special array
array2.length; // 2
var sidebar = tree.find('sidebar');
// add single node
sidebar.where({tagname: 'p'}).length; // 1
sidebar.add({tagname: 'p'}); // adds object to sidebar node
sidebar.where({tagname: 'p'}).length; // 2
// add array of objects
sidebar.where({tagname: 'span'}).length; // 1
sidebar.add([
{ tagname: 'span'},
{ tagname: 'span'}
]);
sidebar.where({tagname: 'span'}).length; // 3
// adding a node to the left of the current node
sidebar.insertBefore({id: 'sidebar_left'});
sidebar.prev().id // "sidebar_left"
// adding a node to the right of the current node
sidebar.insertAfter({id: 'sidebar_right'});
sidebar.next().id // "sidebar_right"
// adding or inserting other nodes in the tree will perform a "move"
var tree = new Backbone.TreeModel(treeObject); // start over with original data
tree.find('content').add(tree.find('sidebar')); // add existing node
tree.find('content').nodes().length; // 3
tree.find('sidebar').parent() == tree.find('content'); // true
var tree = new Backbone.TreeModel(treeObject); // start over with original data
tree.find('wrapper').nodes().length; // 2
tree.find('sidebar').remove(); // remove sidebar node
tree.find('wrapper').nodes().length; // 1
tree.find('wrapper').nodes().first().id; // "content"
var tree = new Backbone.TreeModel(treeObject); // start over with original data
tree.where({tagname: 'span'}).length; // 2
tree.remove({tagname: 'span'}, true); // remove first matched span
tree.where({tagname: 'span'}).length; // 1
var tree = new Backbone.TreeModel(treeObject); // start over with original data
tree.where({tagname: 'span'}).length; // 2
tree.remove({tagname: 'span'}); // remove all matched nodes
tree.where({tagname: 'span'}).length; // 0
Please ensure all current tests pass and write tests for new features.
You can run tests either on the browser or using the mocha command line tool.
For browser tests, open test/index.html
or test/amd.html
.
To run tests in the terminal
npm install
npm test
FAQs
Tree data structure using Backbone Model and Collection
The npm package backbone-tree-model receives a total of 585 weekly downloads. As such, backbone-tree-model popularity was classified as not popular.
We found that backbone-tree-model demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.