My backbone view folder:
view.html
tmpl/t01.html
tmpl/t02.html
tmpl/t03.html
view.html:
...
<div id="tmpl"></id>
in view.html, when I click button 01, I would like to display tmpl/t01.html within view.html, How can I do that?
You could handle this with an ajax request manually:
$.ajax({
url: 'tmpl/t01.html',
dataType: 'text',
success: function(data){
var compiledTpl = _.template( data, {} );
$('#tmpl').html(compiledTpl);
}
);}
Or with text plugin for require.js
require(["text!tmpl/t01.html"],
function(html) {
var compiledTpl = _.template( html, {} );
$('#tmpl').html(compiledTpl);
}
);
Related
I have a html page which I am including as follows.
<ng-include src="lowerTabURL"></ng-include>
This page contains a devextreme control which loads a datasource via ajax.
html:
<div class="tab-container" style="height:100%; width:100%">
<div dx-tabs="lowerTabOptions" dx-item-alias="lowerTab">
</div>
</div>
controller:
DemoApp.controller('NavigationController', function DemoController($scope, $templateCache) {
$scope.lowerTabURL = "LowerPanelTest";
$scope.currentSidebarId = 10100;
$scope.lowerTabOptions = {
dataSource: new DevExpress.data.CustomStore({
load: function (loadTabOptions) {
console.log('get tabs');
var d = $.Deferred();
$.ajax({
url: 'GetLowerTabs',
data: { currentSidebarId: $scope.currentSidebarId },
type: 'GET',
success: function (result) { console.log(result); d.resolve(result); }
});
return d.promise();
}
}),
animationEnabled: true,
swipeEnabled: true,
itemTitleTemplate: 'title',
height: '100%'
};
$scope.navBarClicked = function (sidebarId) {
console.log(sidebarId);
$scope.currentSidebarId = sidebarId;
}
});
This works correctly however I have a navbar which when clicked, should change the tab control.
Currently I am changing the sidebarId which gets passed to the ajax call but I need a way to reload the include page so that this is called again. I have tried changing the lowerTabUrl and then changing it back again but this doesnt refresh the page. What is the best way to do this?
It depends on your angular version, you will need to watch after changes of value for param sidebarId, # angular 1 this is achieved by scope.watch
scope.$watch('sidebarId', function(newValue, oldValue) {
// ..call refresh here
});
at angular 1.5 and later you can override ngOnChages
this.$onChanges = function (changesObj) {
if (changesObj.sidebarId) {
// changesObj.sidebarId.currentValue
}
};
How to initialize this object dinamicly after click and bind this in template?
$scope.send = function(){
var setting = {};
var uploader = new FileUploader({
url: settings.path,
alias: settings.alias,
formData: settings.data,
autoUpload: true,
queueLimit: settings.limit
});
}
Than object uploader will be available in template:
<div class="attachements" nv-file-drop="" uploader="uploader"></div>
Now, after loading page I get error, that uploader should be defined:
TypeError: "Uploader" must be an instance of FileUploader
I am trying to pass the JSON output from one view to another view. But I stuck here as I don't know to how move forward. It seems, some event handling, triggers may help. I searched, but I couldn't figured out! I pasted my complete code. Backbone+underscore+jquery front-end with restful back-end. There 5-7 sub-category level. When we print the main category, it should have a hyperlink to navigate to the next sub-category & the sub-category will have links to another level. I successfully got main-category output. Now the main category view has some JSON values to link to the sub-category. I just need some idea on how to pass the JSON value to the another view(sub-category view) to post it to server to get the sub-category list. Hope, it makes clear.
<body>
<div class="page"></div>
<script src="https://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script type="text/template" id="user-list-template">
<% _.each(mainCategoryListResponseCollection, function(MainCategoryListResponse) { %>
<p><%= MainCategoryListResponse.get('directoryName') %></p>
<% }); %>
</script>
var MainCategoryListResponse = Backbone.Model.extend({
urlRoot:'/main-dirctory',
defaults:{
"clientCompanyName":"GOD",
"clientCountry":"ALL Country"
"mainCategoryId":"", // This Id from server is used to get the sub-category list
"rootId"":''// This Id from server is used to get the sub-category list
}
});
var MainCategoryListResponseCollection = Backbone.Collection.extend({
model: MainCategoryListResponse,
url: '/main-dirctory'
});
var MainCategoryListView = Backbone.View.extend({
el: '.page',
render: function() {
var that = this;
var mainCategoryListResponseCollection = new MainCategoryListResponseCollection();
// mainCategoryListResponseCollection.set({"typeId": "1"});
mainCategoryListResponseCollection.fetch({
type: 'POST',
data: JSON.stringify({'typeId': '1'}), //Passing the value manually here in the first parent view
contentType: "application/json",
dataType: "json",
success: function (mainCategoryListResponseCollection) {
var template = _.template($('#user-list-template').html(), {mainCategoryListResponseCollection: mainCategoryListResponseCollection.models});
that.$el.html(template);
}
});
}
});
var SubCategoryListView = Backbone.View.extend({
el: '.page',
render: function() {
var that = this;
var subCategoryListResponseCollection = new SubCategoryListResponseCollection();
subCategoryListResponseCollection.fetch({
type: 'POST',
data: JSON.stringify({'???': '???'}), //here I need to pass the dynamic value from the above view. The dynamic value should be like "mainCategoryId": "5", "rootId": "0" which is getting printed in the each loop down here.
contentType: "application/json",
dataType: "json",
success: function (subCategoryListResponseCollection) {
var template = _.template($('#user-list-template').html(), {subCategoryListResponseCollection: subCategoryListResponseCollection.models});
that.$el.html(template);
}
});
}
});
var Router = Backbone.Router.extend({
routes:{
"":"main_directory"
}
});
var MainCategoryListView = new MainCategoryListView();
var router = new Router();
router.on('route:main_directory', function() {
MainCategoryListView.render();
});
Backbone.history.start();
</script>
</body>
I am trying to figure out how to use a router and controller in my Marionette.js application. I am able to start the initial page in my App's start handler, but I can't seem to figure out how to handle other routes. This SPA isn't complex, where I only have three pages for my users. One is a leads table view, a vehicle table view, and a view of a single vehicle. I'm not worried about the single vehicle view until I figure out how this routing works.
// my app
var App = new Marionette.Application({});
// my lead and vehicle model rows
App.vehicleRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#vehicle-row-tpl'
});
App.leadRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#lead-row-tpl'
});
// composite views for the tables
App.vehicleTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#vehicles-table',
childViewContainer: 'tbody',
childView: App.vehicleRowView
});
App.leadsTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#leads-table',
childViewContainer: 'tbody',
childView: App.leadRowView
});
// controller
var Controller = Marionette.Object.extend({
leads: function() {
var leadstable = new App.leadsTableView({
collection: this.leads
});
App.regions.leads.show(leadstable);
},
vehicles: function() {
console.log('vehicles...');
}
});
// router
var AppRouter = Marionette.AppRouter.extend({
controller: new Controller,
appRoutes: {
'leads': 'leads',
'vehicles': 'vehicles'
}
});
App.router = new AppRouter;
App.vehicles = [];
App.leads = [];
// Start handlers
App.on('before:start', function() {
this.vehicles = new Vehicles();
this.vehicles.fetch();
this.leads = new Leads();
this.leads.fetch();
var appContainerLayoutView = Marionette.LayoutView.extend({
el: '#app-container',
regions: {
vehicles: '#vehicles-content',
leads: '#leads-content'
}
});
this.regions = new appContainerLayoutView();
});
App.on('start', function() {
Backbone.history.start({pushState: true});
var vehiclesLayoutView = new this.vehicleTableView({
collection: this.vehicles
});
App.regions.vehicles.show(vehiclesLayoutView);
});
App.start();
On start, the front page is fine. However, when I go to #leads, my leads table doesn't render. Actually, the route doesn't happen, and the URL changes to /#leads. If I then go to that URL, the table skeleton renders, but not the data. The collections are loaded fine on before:start, and the templates are fine. I have to go to the URL twice, but the table has no data, even though my App.leads collection is loaded fine. My console.log output confirms I am hitting the route, though.
I want to hide the vehicles region when the user goes to the #leads route. When the user goes to #vehicles, I then want to hide my leads table and display the vehicles (same view from my start handler).
I feel like I'm right there, but missing something basic.
By looking at your vehicles and leads regions, I have a suspicion you've misunderstood the role of regions. If you expect them to swap one another, then you would create just one region and have that region .show( new VehiclesView() ); when you want to show vehicles, and .show( new LeadsView() ); when you want the leads to replace the vehicles.
And here's a working example:
var app = new Mn.Application();
var Controller = Mn.Object.extend({
leads: function(){
app.regions.setActive('leads').getRegion('main').show( new LeadsView() );
},
vehicles: function(){
app.regions.setActive('vehicles').getRegion('main').show( new VehiclesView() );
}
});
var VehiclesView = Mn.ItemView.extend({
template: _.template('،°. ˘Ô≈ôﺣ » » »')
});
var LeadsView = Mn.ItemView.extend({
template: _.template("( /.__.)/ (.__.)")
});
var AppLayoutView = Mn.LayoutView.extend({
el: '#app',
regions: { main: 'main' },
events: { 'click nav a': 'onClick' },
onClick: function(evt){
evt.preventDefault();
var viewName = evt.currentTarget.dataset.view;
app.controller[viewName]();
app.router.navigate(viewName);
},
setActive: function(viewName){
/** it might seem that it is easier to just
make the link bold on click, but you would have
to handle it if you want to make it active on page load */
this.$('nav a').
removeClass('active').
filter('[data-view="'+viewName+'"]').
addClass('active');
return this;
}
});
app.on('start',function(){
app.regions = new AppLayoutView();
app.controller = new Controller();
app.router = new Mn.AppRouter({
controller: app.controller
});
Backbone.history.start({pushState: true});
/** show initial content */
app.controller.leads();
app.router.navigate('leads');
});
app.start();
.active { font-weight :bold ;}
<script src='http://code.jquery.com/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js'></script>
<div id="app">
<nav>
Vehicles
Leads
</nav>
<main></main>
</div>
I have problem with my AngularJS application. In my html view, i have list that contains JavaScript objects.
<div ng-init="initWeek()" ng-controller="TableController">
<div id="TaskImages"> <div ng-repeat="task in taskList"> <div id="TaskImg" ><br> {{task.title}}<br>{{task.start}} </div> </div></div>
I set taskList by using the Jquery/Ajax, which gets all task object from server.
function getTaskFromServer() {
$.ajax({
type : "POST",
url : "main_page",
success : function(data) {
var taskList = $.parseJSON(data);
week[0].push(taskList[0]);
},
});
My controller looks like this:
$scope.initWeek = function() {
getTaskFromServer();
};
$scope.taskList = week[currentlySelectedDay-1];
When I load application, the list "week" contains objects but in html view can see text.
I think that $scope.taskList is loaded before list "week".
For example, when I use:
$scope.initWeek = function() {
getTaskFromServer();
alert(week[0].lenght);
};
$scope.taskList = week[currentlySelectedDay-1];
Site displays alert and when i click Ok the text from taskList is a an website.
Since it is an asynchronous operation, you must set the taskList inside the ajax callback:
function getTaskFromServer() {
$.ajax({
type : "POST",
url : "main_page",
success : function(data) {
var taskList = $.parseJSON(data);
week[0].push(taskList[0]);
$scope.taskList = week[currentlySelectedDay-1];
},
});
}
It would be even better if you could replace the jquery ajax call with an angular call using $http.
Hope that helps.