-1
J'ai un LayoutView dans lequel j'ai deux régions nom filtre région et principale région (Région de contenu). Basé sur la sélection sur la région de filtre, j'ai besoin de montrer la vue dans la région principale. Pour l'instant, j'ai créé une vue pour montrer dans la région principale en vue de l'année courante, mais j'ai besoin d'entrées sur comment créer une vue pour l'autre Wireframe que j'attache dans mon panneau de question maintenant.Comment afficher/cacher deux vues dans une région js Marionette
// Application Bootstrap
var App = new Marionette.Application();
// Add a region
App.addRegions({
main: "#app"
});
/*DATA*/
var data = {
"accounts": [{
"accountNumber": "AllAccounts",
"assets": [{
"assetName": "ASSET 1",
"isin": "GB0008533564",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
}]
},
{
"assetName": "ASSET 2",
"isin": "GB0008533565",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
}]
},
{
"assetName": "ASSET 3",
"isin": "GB0008533566",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
}]
}
]
}]
};
// AssetsModel
var AssetsModel = Backbone.Model.extend({});
//AssetsCollection - will contain the assets array
var AssetsCollection = Backbone.Collection.extend({
model: AssetsModel,
getAssetCost: function() {
var assetCost = 0;
this.each(function(model) {
_(model.get('grossProfit')).each(function(gross) {
assetCost += parseInt(gross.assetCost, 10);
});
});
return assetCost;
},
getUnits: function() {
var units = 0;
this.each(function(model) {
_(model.get('grossProfit')).each(function(gross) {
units += parseInt(gross.units, 10);
});
});
return units;
},
getNetGainLoss: function() {
var netGainLoss = 0;
this.each(function(model) {
_(model.get('grossProfit')).each(function(gross) {
netGainLoss += parseInt(gross.netGainLoss, 10);
});
});
return netGainLoss;
}
});
// AccountsModel - unique idAttribute will be accountNumber and setting the assets key of AccountsModel to AssetsCollection
var AccountsModel = Backbone.Model.extend({
idAttribute: "accountNumber",
initialize: function(response) {
this.set('assets', new AssetsCollection(response.assets));
}
});
// AccountsCollection - will be containg the Acccounts Array
var AccountsCollection = Backbone.Collection.extend({
model: AccountsModel
});
// Passing the data.accounts to accountsCollection instance
var accountsCollection = new AccountsCollection(data.accounts);
// AppLayoutView - mainlayoutview of the application
var AppLayoutView = Marionette.LayoutView.extend({
template: Handlebars.compile($("#layout-view-template").html()),
regions: {
filter: "#filterArea",
main: "#contentArea" // mainContentArea regiobn- will be containing two type of views:
// 1. High level view, with multiple assets as table row's and only one object inside grossProfit
// 2. Deep level view, with multiple objects inside assets array as table and mutliple objects inside grossProfit array
// (second point, need to be discussed for which i am raising question)
},
onRender: function() {
this.showChildView("filter", new FilterView());
this.showChildView("main", new TableCompositeView({
collection: accountsCollection.get('AllAccounts').get('assets')
}));
}
});
var FilterView = Marionette.ItemView.extend({
id: "filter-view",
template: Handlebars.compile($('#filter-view-template').html())
});
var RowView = Marionette.ItemView.extend({
tagName: "tr",
template: Handlebars.compile($('#report-row-template').html())
});
var TableCompositeView = Marionette.CompositeView.extend({
id: "report-area-view",
tagName: "section",
template: Handlebars.compile($("#report-view-template").html()),
childView: RowView,
childViewContainer: "#childWrapper",
templateHelpers: function() {
var totalAssetCost = this.collection.getAssetCost();
var totalUnits = this.collection.getUnits();
var totalNetGainLoss = this.collection.getNetGainLoss();
return {
totalAssetCost: totalAssetCost,
totalUnits: totalUnits,
totalNetGainLoss: totalNetGainLoss
}
}
});
var layoutView = new AppLayoutView();
// Render the layoutView to the main Region
App.getRegion('main').show(layoutView);
App.start();.container {
padding-top: 10px;
}<div class="container">
<div class="row">
<div class="col-md-12">
<div id="app"></div>
</div>
</div>
</div>
<!--TEMPLATES -->
<script id="layout-view-template" type="text/handlebars-template">
<section>
<div id="filterArea"> </div>
<div id="contentArea"> </div>
</section>
</script>
<script id="filter-view-template" type="text/handlebars-template">
<div class="well">
<input type="radio" name="currentYear" value="currentYear" /> Current year <br/><br/>
<input type="radio" name="twoYears" value="pastYears" /> Past 2 year
</div>
</script>
<script id="report-view-template" type="text/handlebars-template">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Asset Name</th>
<th>Asset Cost</th>
<th>Units</th>
<th>NetGainLoss</th>
</tr>
</thead>
<tbody id="childWrapper"></tbody>
<tfoot>
<tr>
<th>Total</th>
<th>₹ {{totalAssetCost}}</th>
<th>₹ {{totalUnits}}</th>
<th>₹ {{totalNetGainLoss}}</th>
</tr>
</tfoot>
</table>
</script>
<script id="report-row-template" type="text/handlebars-template">
<td>{{assetName}}</td>
{{#grossProfit}}
<td>{{assetCost}}</td>
<td>{{units}}</td>
<td>{{netGainLoss}}</td>
{{/grossProfit}}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.2/backbone.marionette.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.0/handlebars.min.js"></script>S'il vous plaît utiliser les données ci-dessous pour afficher les 2 ans Vue passé, il n'y a que des changements mineurs-à-dire que les objets du tableau grossProfit ont été augmentées .
var data = {
"accounts": [{
"accountNumber": "AllAccounts",
"assets": [{
"assetName": "ASSET 1",
"isin": "GB0008533564",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
},
{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
}
]
},
{
"assetName": "ASSET 2",
"isin": "GB0008533565",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
},
{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
}
]
},
{
"assetName": "ASSET 3",
"isin": "GB0008533566",
"grossProfit": [{
"assetCost": "500",
"units": "10",
"netGainLoss": "20"
},
{
"assetCost": "1000",
"units": "10",
"netGainLoss": "20"
}
]
}
]
}]
};
Les validations sur le site sont destinées à améliorer les questions. -1 pour contourner les validations et ne pas publier d'exemple de code en question. Je vote pour clore cette question car elle ne contient aucun code lié à ce que vous décrivez (les liens externes ne comptent pas parce qu'ils peuvent descendre et que la question devient obsolète).Veuillez suivre les règles du site –
Je me suis récemment enregistré sur le code et je n'étais pas au courant de la requête que vous annotez, donc ce sera génial si quelqu'un peut m'aider avec le problème au lieu de mettre des coches négatives. Merci – user7386493
Vous devez suivre les règles du site et poser des questions appropriées si vous souhaitez recevoir de meilleures réponses. –