मैं बैकबोन.जेएस को लागू करने वाले मेरे वर्तमान ऐप में कुछ याद कर रहा हूं। समस्या यह है कि मेरे पास एक मास्टर ऐप व्यू है, जो पेज के लिए विभिन्न सबव्यूज़ (एक ग्राफ, सूचना की एक तालिका इत्यादि) शुरू करता है। मेरी इच्छा पृष्ठ के लेआउट को बदलने के लिए नेविगेट करते समय पैरामीटर ध्वज के आधार पर बदलने में सक्षम होना है।बैकबोन व्यू नेस्टिंग
जो मैं चलाता हूं वह एक ऐसा मामला है जहां सबव्यूज, जो टेम्पलेट के बाद होने वाले डोम तत्वों के संदर्भ में होते हैं, मुख्य ऐप व्यू प्रारंभिक प्रक्रिया के दौरान उन तत्वों तक पहुंच नहीं है। तो मुख्य सवाल यह है कि मैं कैसे सुनिश्चित करूं कि प्रत्येक ईवेंट बाइंड प्रक्रिया को ठीक से सेटअप करने के लिए उचित डोम तत्व मौजूद हैं?
निम्न कोड के साथ यदि मेरे पास मेरे लेआउट व्यू के भीतर मॉडल परिवर्तन से जुड़ा कोई ईवेंट है, तो लेआउट प्रदान किया जाता है लेकिन बाद के विचार ठीक से प्रस्तुत नहीं होते हैं। कुछ चीजें जिनके साथ मैंने झुकाया है, वे सभी विचारों को '।' मानों को HTML संरचना के भीतर एक स्थिर तत्व में सेट करना है। यह प्रस्तुति हो रही है, हालांकि यह '.el' का उपयोग करके प्रदान की गई अच्छी स्कोपिंग क्षमता से अलग हो रहा है।
नमूना कोड:
//Wrapped in jquery.ready() function...
//View Code
GraphView = Backbone.View.extend({ // init, model bind, template, supporting functions});
TableView = Backbone.View.extend({ // init, model bind, template, supporting functions});
LayoutView = Backbone.view.extend({
initialize: function() {
this.model.bind('change:version', this.render, this);
},
templateA = _.template($('#main-template').html()),
templateB = _.template($('#secondary-template').html()),
render: function() {
if ('main' == this.model.get('version')) {
this.el.html(this.templateA());
} else {
this.el.html(this.templateB());
}
},
});
MainView = Backbone.View.extend({
initialize: function() {
this.layoutView = new LayoutView({
el: $('#layoutContainer'),
model: layout,
});
this.graphView = new GraphView({
el: $('.graphContainer'),
model: graph
});
this.tableView = new TableView({
el: $('#dataTableContainer',
model: dataSet
});
},
});
// Model Code
Layout = Backbone.Model.extend({
defaults: {
version: 'main',
},
});
Graph = Backbone.Model.extend({});
dataSet = Backbone.Model.extend({});
// Router code...
// Fire off the app
AppView = new MainView($('#appContainer'));
// Create route, start up backbone history
HTML: सरलता के लिए मैं सिर्फ दो लेआउट के बीच divs पुन: व्यवस्थित।
<html>
<head>
<!-- include above js and backbone dependancies -->
</head>
<body>
<script type="text/template" id="main-template">
<div class="graphContainer"></div>
<div class="dataTableContainer"></div>
<div>Some other stuff to identify that it's the main template</div>
</script>
<script type="text/template" id="secondary-template">
<div class="dataTableContainer"></div>
<div>Rock on layout version two!</div>
<div class="graphContainer"></div>
</script>
<div id="appContainer">
<div id="nav">
<a href="#layout/main">See Layout One</a>
<a href="#layout/secondary">See Layout Two</a>
</div>
<div id="layoutContainer"></div>
</div>
</body>
</html>
अंतर्दृष्टि/इनपुट की सराहना करें कि आपके किसी भी व्यक्ति के पास हो सकता है। धन्यवाद!
बस एफवाईआई, आपको अपने कोड में टाइपो का एक गुच्छा मिला है - क्या यह मानना सुरक्षित है कि ये कॉपी/पेस्ट समस्याएं हैं, वास्तविक वाक्यविन्यास त्रुटियां नहीं? – nrabinowitz
दोष प्रतिलिपि/पेस्ट, अंतर्निहित तर्क, उम्मीद है कि अभी भी व्यक्त किया जा रहा है। यह बात बताने के लिए धन्यवाद। – aztechy