-1
我有一个LayoutView中，我有两个地区命名过滤区域和主要区（内容区域）。基于过滤区域的选择，我需要将视图显示在主区域中。到目前为止，我已经创建了一个视图来显示主要区域，即当前年度视图，但我需要输入有关如何为我现在附加到我的问题面板中的其他线框创建视图。如何显示/隐藏在一个木偶JS地区两种意见
// 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>请使用下面的数据显示在过去2年视图，只有轻微的变化，即仅grossProfit阵列对象已被增加。
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"
}
]
}
]
}]
};
网站验证是为了改善问题。 -1用于绕过验证并且不会发布有问题的代码示例。我投票结束这个问题，因为它不包含任何与你所描述的内容相关的代码（外部链接不能计数，因为它们可能会失效，问题就会过时）。请按照网站规则 –
我最近检查了代码，并没有意识到您正在注释的查询，所以如果有人能够帮助我解决问题而不是提出否定的问题，那将是非常棒的。谢谢 – user7386493
如果你想得到更好的答案，你需要遵循网站规则并发布适当的问题。 –