कुछ इस तरह (Live copy on js fiddle):
सीएसएस:
.left {
float: left;
}
.clear {
clear: both;
}
HTML:
<p>Current:
<a href="#" data-bind="visible: (stack.length > 0), text: selectedNode().name, click: selectParentNode"></a>
<span data-bind="visible: (stack.length <= 0), text: selectedNode().name"></span>
</p>
<p class="left">Children: </p>
<ul class="left" data-bind="template: {name: 'childList', foreach: selectedNode().children}"></ul>
<script type="text/html" id="childList">
<li data-bind="click: function(){nodeViewModel.selectChildNode($data)}">
<a href="#">A${name}</a>
</li>
</script>
<br /><br />
<ul class="clear" data-bind="template: {name: 'backBtn'}"></ul>
<script type="text/html" id="backBtn">
<a href="#" data-bind="visible: $data.selectedNode().back, click: function() { nodeViewModel.selectBackNode($data.selectedNode().back) }">Back</a>
</script>
जावास्क्रिप्ट:
var node = function(config, parent) {
this.parent = parent;
var _this = this;
var mappingOptions = {
children: {
create: function(args) {
return new node(args.data, _this);
}
}
};
ko.mapping.fromJS(config, mappingOptions, this);
};
var myModel = {
node: {
name: "Root",
children: [
{
name: "Child 1",
back: 1,
children: [
{
name: "Child 1_1",
back: 1,
children: [
{
name: "Child 1_1_1",
back: 4,
children: [
]},
{
name: "Child 1_1_2",
back: 2,
children: [
]},
{
name: "Child 1_1_3",
back: 1,
children: [
]}
]}
]},
{
name: "Child 2",
back: 1,
children: [
{
name: "Child 2_1",
back: 1,
children: [
]},
{
name: "Child 2_2",
back: 1,
children: [
]}
]}
]
}
};
var viewModel = {
nodeData: new node(myModel.node, undefined),
selectedNode: ko.observable(myModel.node),
stack: [],
selectBackNode: function(numBack) {
if (this.stack.length >= numBack) {
for (var i = 0; i < numBack - 1; i++) {
this.stack.pop();
}
}
else {
for (var i = 0; i < this.stack.length; i++) {
this.stack.pop();
}
}
this.selectNode(this.stack.pop());
},
selectParentNode: function() {
if (this.stack.length > 0) {
this.selectNode(this.stack.pop());
}
},
selectChildNode: function(node) {
this.stack.push(this.selectedNode());
this.selectNode(node);
},
selectNode: function(node) {
this.selectedNode(node);
}
};
window.nodeViewModel = viewModel;
ko.applyBindings(viewModel);
यह नमूना सिर्फ एक असीम नक्शे JSON डेटा का नेस्टेड सेट, और मैं वास्तव में एप्लिकेशन में इस सटीक कोड का उपयोग करके कह सकता हूं जो कि बहुत अच्छा काम करता है।
तरह
selectBackNode और selectParentNode अतिरिक्त कार्यों में से कुछ
तुम वापस पेड़ पर स्थानांतरित करने के लिए अनुमति देते हैं।
उदाहरण को नेविगेट करते समय अभिभावक लेबल एक स्तर तक जाने की अनुमति देने के लिए एक लिंक बन जाता है, और कुछ पत्ते नोड्स में एक बैक बटन होता है जो उन्हें किसी दिए गए स्तर से पेड़ को वापस ले जाने की अनुमति देता है।
--EDIT--
अपने पत्र-गांठ एक बच्चों सरणी आप एक समस्या है, जहां अतिरिक्त डेटा शुरू की है कि मॉडल में मौजूद नहीं है मिल सकता है नहीं है, तो।
यह शानदार काम, HJ05 है। जवाब के लिए धन्यवाद। –
स्टैक adt – booyaa
के उपयोग के लिए +1 jsFiddle जैसे लिंक एक अच्छा * adjunct * हैं, लेकिन हमेशा उत्तर में प्रासंगिक कोड और मार्कअप ** डाल दें **। क्यों: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question मैंने इसे आपके लिए किया है इस अवसर। –