I'm trying to map routes dynamically.
I have a document in the database with the categories: lie this.
{
name : "menu" , content :
[
{name : "Category-1", permalink : "cat-1", order : 0},
{name : "Category-2", permalink : "cat-2", order : 0},
{name : "Category-3", permalink : "cat-3", order : 0},
{name : "Category-4", permalink : "cat-4", order : 0},
{name : "Category-5", permalink : "cat-5", order : 0},
]
}
What i tired to do:
client side:
Template.navBar.helpers({
menu : function () {
return Elements.findOne({name : "menu"}).content;
},
path : function () {
permalink = this.permalink;
Router.map(function () {
this.route(permalink, {
path: "/" + permalink + "/",
template: 'listParent',
data: function () {
currentSubs(permalink, 'none', 0);
}
})
});
return "/" + permalink + "/";
}
});
Serverside startup:
//add menu to the router
var menu = Elements.findOne({name : "menu"}).content;
for (var i = 0; i < menu.length; i++) {
console.log(menu[i].permalink);
Router.map(function () {
this.route(menu[i].permalink, {
path: "/" + menu[i].permalink + "/",
template: 'listParent'
})
});
}
In the client side when I click in every route(on 5 of them) the results are like what i waite for Category-5.
Any idea on how can i achieve this without having to use:
this.route('list', {
path: '/:list/',
template: 'listParent',
data: function () {
list = this.params.list
currentSubs(list, 'none', 0);
}
});
I want a special route for every category that i have in menu document in database.
It wouldn't allow me to comment due to not having 50 reputation but I meant this as a comment above about the active routes and adding an active class to the <li>. Maybe this package is what you're looking for: https://atmospherejs.com/zimme/iron-router-active
Related
In ExtJS 6.02, I would like to add a new item currentPage to the config of a component:
{
xtype : 'button'
, text : 'Next'
, iconCls : 'arrow-right'
, config: {
currentPage : 1
}
, bind: {
currentPage : '{currentPage}'
, hidden : '{hideNextButton}'
, disabled : '{disableNextButton}'
}
, publishes : 'currentPage'
, handler: function(btn) {
this.setCurrentPage(this.getCurrentPage()++);
},
}
This is not working, this.getCurrentPage() and this.setCurrentPage() aren't available.
I'm using durandal/requirejs/knockout here.
I'm also using the coderenaissance plugin for mapping (ko.viewmodel.updateFromModel(zitem, data).)
I'm getting the following data from my ajax call which I'm mapping into my zitem observable.
{
"itemNumber" : "ABATAH000",
"effectiveDate" : "2015-11-03T15:30:05.7118023-05:00",
"expiryDate" : "2015-05-03T15:30:05.7118023-04:00",
"minimumPremium" : 25,
"zSubItems" : [{
"zSubItemName" : "Mine",
"unitDistance" : 100000,
"zSubSubItems" : [{
"zSubSubItemName" : "CoverageA",
"zSubSubItemPremium" : 100.0,
"id" : 0
}
],
"id" : 1
}
],
"id" : 0
}
And here is the viewmodel I'm using:
define(['plugins/http', 'durandal/app', 'knockout', 'services/datacontext'],
function (http, app, ko, datacontext) {
var zitem = ko.observable();
var activate = function () {
//This is just a wrapper around an ajax call.
return datacontext.getPolicy("value")
.then(function(data) {
ko.viewmodel.updateFromModel(zitem, data);
});
};
var updateMinimumPremium = function (thisItem) {
//This doesn't work
zitem.minimumPremium(thisItem.minimumPremium + 1);
};
return {
displayName: 'zitem example',
zitem: zitem,
updateMinimumPremium: updateMinimumPremium,
activate: activate
};
});
I'm binding the updateMinimumPremium to a click on a button at the same level as the minimumPremium element.
<button data-bind="click: $parent.updateMinimumPremium">Add 1</button>
How can I update [minimumPremium] or [zSubSubItemPremium] programatically?
"minimumPremium" would be observable
zitem.minimumPremium(thisItem.minimumPremium() + 1);
Your zitem is observable as well, so try this:
zitem().minimumPremium(thisItem.minimumPremium + 1);
In real application don't forget to check the value of zitem() call - it can be uninitialized.
I am trying to unit test this service using jasmine:-
my unit test is :-
describe('initial configuration for the test user', function () {
beforeEach(function(){
var config = {
'Apache 404' : {
content : {
type : 'tip',
template : 'yesNo',
text : 'Are you searching for status code 404?',
yesText : 'Try our more accurate field search',
attachTo : '#inputBox right',
yesActions : {
0 : {
type : 'replaceSubstring',
target : '#inputBox',
value : 'apache.status:404',
match : '404'
}
}
},
conditions : {
0 : {
type : 'valueChange',
target : '#inputBox',
textMatch : '(^|([\\s]+))404(([\\s]+)|$)',
preventSubmit : true
},
1 : {
type : 'contentPropertyLessThan',
propertyName : 'timesShown',
compareVal : 3
}
}
}
};
var clientName = 'testClient';
var fireRef = new Firebase('https://luminous-inferno-1740.firebaseio.com/' + clientName);
var fireSync = $firebase(fireRef);
fireSync.$set({'config' : config});
log.message = 'Resetting user data';
$log.debug(log);
userData.init(function(done) {
done();
});
});
it('should have a valid config', function () {
expect(Object.keys(userData.getConfig()).length > 1);
});
});
I am receiving an error :-
ReferenceError: $firebase is not defined
at Object.
Can somebody help me providing working example of my code with some explanation?
I also had the problem. I solved my problem by adding $firebaseArray in the parameter of the controller
.controller('ChatsCtrl', ['$scope','$firebaseArray','$rootScope',......
One thing should be noted that firebase has been updated that $firebase is no longer supported. You can only use $firebaseArray or $firebaseObject for retrieving the data.
As part of our Grunt build we are transpiling some typescript code into a few separate files, and then concatenating the resulting javascript along with all the rest of our javascript code. Unfortunately I can't get the dynamic buildup of filenames to work along with grunt-concat.
This is the relevant snippet from our Gruntfile - see the part on generatedTypeScriptFiles, which doesn't work.
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js'
];
grunt.initConfig({
gitinfo : {}, //will be populated with values from Git
options : {
"packageName" : nconf.get("name"),
"frameworkVersion" : nconf.get("version"),
"frameworkOutputPath" : nconf.get("frameworkOutputPath"),
"workerOutputPath" : nconf.get("workerOutputPath"),
"sourceMapPath" : nconf.get("sourceMapPath")
},
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
generatedTypeScriptFiles : {
all : function () {
var tsf = [];
for (var key in this.typescript) {
if(this.typescript[key].dest) {
tsf.push(this.typescript[key].dest);
}
}
return tsf;
}()
},
scriptfiles : {
hybrid : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}(),
web : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}()
}
concat : {
web : {
options : {
separator : ';',
},
src : '<%= scriptfiles.web %>',
dest : '<%= options.frameworkOutputPath %>'
}
}
}
I am guessing that for our case where we actually know all the resulting filenames in our typescript build step, we could just build up the filenames beforehand - outside of grunt.initConfig. That should fix things, right? Or is there another way?
Maybe I misunderstand the problem or what you're trying to do, but why don't you just glob all .js files from the "generated" directory?
Like this:
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js',
'generated/*.js'
];
grunt.initConfig({
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
concat : {
web : {
options : {
separator : ';',
},
src : jsFiles,
dest : '<%= options.frameworkOutputPath %>'
}
}
});
Creating a ajava script array in given format with carousel ?
Iam using carousel.js & carousel.css, its working fine with static data, but when im trying to put dynamic data its hot happening. Im not able to create the value array in given format.
<script>
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : [
{
"image" : "images/banner/big_banner_01.jpg",
},
{
"image" : "images/banner/big_banner_02.jpg",
},
{
"image" : "images/banner/big_banner_03.jpg",
},
{
"image" : "images/banner/big_banner_04.jpg",
},
{
"image" : "images/banner/big_banner_05.jpg",
}
]
} );
</script>
I need to pass the value for "value" key dynamically. How can i form this dynamically .IM TRYING WITH THE BELOW ONE
<repeat index="index.value" ref="DATA">
<repeat ref="VAL">
<choose ref="LANGUAGE">
<when value="${lang}">hiii
<script>
val[index.value] = "{"+"'image' :" +${IMAGE}+"}";</script>
</when>
<otherwise/>
</choose>
</repeat>
</repeat>
This is not working.
<script>
var generateCaroseul = {
getData: function(){
//loop through html to create an object with the data.
var dataObj = null;
$('li').each(function(index) {
var imgUrl = $(this).attr("src");
dataObj.add("image", imgUrl);
});
return dataObj;
}
};
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : generateCaroseul.getData()
} );
</script>