So I have a Backbone router table like this :
var TodosRouter = Backbone.Router.extend({
routes: {
":roles_id": "main",
":edit/:roles_id_editInfos": "edit",
":changepass/:id_user": "changepass"
},
main: function (list_id) {
var oldList = Session.get("roles_id");
if (oldList !== list_id) {
Session.set("roles_id", list_id);
Session.set("roles_id_editInfos", null);
Session.set("id_user", null);
}
},
edit: function (list_id, list_id2) {
var oldList = Session.get("roles_id_editInfos");
if (oldList !== list_id) {
Session.set("roles_id_editInfos", list_id2);
Session.set('roles_id', null);
Session.set("id_user", null);
}
},
changepass: function (list_id3, list_id4) {
var oldList = Session.get("id_user");
if(oldList !== list_id3){
Session.set('id_user', list_id4);
Session.set('roles_id', null);
Session.set("roles_id_editInfos", null);
}
},
setList: function (list_id) {
this.navigate(list_id, true);
}
});
Router = new TodosRouter;
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
And for some reason when I click on the link -> '/changepass/{{_id}}' it's doesn't work.
But when I click on the other it's work, and if I delete the 'edit' route, for example, the 'changepass' route work.
The Backbone router have a limit of route ?
Can you help me ? :)
routes: {
":roles_id": "main",
":edit/:roles_id_editInfos": "edit",
":changepass/:id_user": "changepass"
},
why are you using colons before your routes path?
Related
i want to iterate over an array, however my array is an observer. i have tried several ways, like converting to an array. nothing works.
does anyone have a suggested solution?
i'm pretty stuck on this.
here is my code:
var vm = new Vue({
el: '#app',
data() {
return {
segmenteConfig: []
}
},
methods: {
async loadData(type) {
var url = null;
console.log("used configs -> ", this.segmenteConfig);
this.segmenteConfig.forEach(segmenteConfig => {
if (segmenteConfig.type === type) {
url = segmenteConfig.url;
console.log("used configs url -> ", url);
}
})
}
loadConfig() {
var config = [];
axios.get("ressources/segmente.json")
.then(response => {
response.data.Segmente.forEach(segmentConfig => {
this.segmenteConfig.push(segmentConfig);
});
});
}
},
created() {
this.loadConfig();
this.loadData('internet');
}
});
I kind of rolled into React when stateless functions where popular so I never experienced the Class approach of it, which is bothering me now..
I'm not sure what this function does:
var keywordMapper = this.createKeywordMapper({
"constant.false": 'false',
"constant.true": 'true',
}, "identifier", true);
Which is called as:
this.$rules = {
"start": [{
token: "constant.numeric", // float
regex: "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
}, {
token: keywordMapper,
regex: "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
}, {
token: "keyword.operator",
regex: "\\+|\\-|\\/|\\/\\/|%|<#>|#>|<#|&|\\^|~|<|>|<=|=>|==|!=|<>|="
}]
};
I think it maps the input (what input :s) and returns either 'false', 'true' or 'identifier' as default.
But what if I want to use it within a stateless functional component? Since I can't use this in there.
Any help or explanation on how the 'this' function works is much appreciated.
Greetings,
edit:
The whole useEffect:
useEffect(() => {
const newCompleter = {
getCompletions(editor, session, pos, prefix, callback) {
callback(null, completions);
},
};
const keywordMapper = this.createKeywordMapper({
"constant.false": 'false',
"constant.true": 'true',
}, "identifier", true);
const completionString = completions.map((x) => x.value).join('|');
const session = editor.current.editor.getSession();
session.setMode(`ace/mode/text`, () => {
const rules = session.$mode.$highlightRules.getRules();
if (Object.prototype.hasOwnProperty.call(rules, 'start')) {
rules.start = [
{
token: 'constant.numeric', // float
regex: '[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b',
},
{
token: keywordMapper(),
regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b',
},
{
token: 'keyword.operator',
regex:
'\\+|\\-|\\/|\\/\\/|%|<#>|#>|<#|&|\\^|~|<|>|<=|=>|==|!=|<>|=',
},
];
}
// }
// force recreation of tokenizer
session.$mode.$tokenizer = null;
session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
// force re-highlight whole document
session.bgTokenizer.start(0);
});
// to extend existing
// addCompleter(myCompleter);
// to override all
setCompleters([newCompleter]);
}, [completions]);
Original class component
ace.define("ace/mode/brms_highlight_rules", ["require", "exports",
"module", "ace/lib/oop", "ace/mode/text_highlight_rules"], function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var BrmsHighlightRules = function() {
var FalseBool = (
"false"
);
var TrueBool = (
"true"
);
var keywordMapper = this.createKeywordMapper({
"constant.false": 'false',
"constant.true": 'true',
}, "identifier", true);
this.$rules = {
"start": [{
token: "constant.numeric", // float
regex: "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
}, {
token: keywordMapper,
regex: "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
}, {
token: "keyword.operator",
regex: "\\+|\\-|\\/|\\/\\/|%|<#>|#>|<#|&|\\^|~|<|>|<=|=>|==|!=|<>|="
}]
};
this.normalizeRules();
};
oop.inherits(BrmsHighlightRules, TextHighlightRules);
exports.BrmsHighlightRules = BrmsHighlightRules;
});
ace.define("ace/mode/brms", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text", "ace/mode/brms_highlight_rules"], function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var BrmsHighlightRules = require("./brms_highlight_rules").BrmsHighlightRules;
var Mode = function() {
this.HighlightRules = BrmsHighlightRules;
this.$behaviour = this.$defaultBehaviour;
};
oop.inherits(Mode, TextMode);
(function() {
this.$id = "ace/mode/brms";
}).call(Mode.prototype);
exports.Mode = Mode;
});
(function() {
ace.require(["ace/mode/brms"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();
I have drift's async script code in the index.html file of the react app.
<script>
"use strict";
!function () {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function (e) {
return function () {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function (e) {
t[e] = t.factory(e);
}), t.load = function (t) {
var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('----api----');
drift.on('ready', api => {
api.widget.hide();
})
</script>
The issue is, it is getting popped up in every page of the app whereas I want it only when I click a button(onClick)
The function to trigger onClick :
openDriftChat = () =>{
const { setDriftState } = this.props;
if (window.drift.api) {
//this needs to happen only once but currently happening on every page load
if (!this.props.driftInit) {
if (localStorage.token) {
var tokenBase64 = localStorage.token.split(".")[1];
var tokenBase64_1 = tokenBase64.replace("-", "+").replace("_", "/");
var token = JSON.parse(window.atob(tokenBase64_1));
window.drift.identify(token.email, {
email: token.email,
nickname: token.name
});
setDriftState(true);
}
}
window.drift.api.openChat();
}
}
I basically want it pop up only when I call the function.
Hello I had the same issue:
To hide the welcome message use the following css code
iframe#drift-widget.drift-widget-welcome-expanded-online {
display: none !important;
}
iframe#drift-widget.drift-widget-welcome-expanded-away {
display: none !important;
}
The welcome message will only be shown when your drift button. Some extra info:
To hide the drift button icon use the following js code
drift.on('ready', function (api) {
api.widget.hide()
drift.on('message', function (e) {
if (!e.data.sidebarOpen) {
api.widget.show()
}
})
drift.on('sidebarClose', function (e) {
if (e.data.widgetVisible) {
api.widget.hide()
}
})
})
To call for the sidebar from a specific button use the following
Javascript
(function () {
var DRIFT_CHAT_SELECTOR = '.drift-open-chat'
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function () {
if (document.readyState != 'loading')
fn();
});
}
}
function forEachElement(selector, fn) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++)
fn(elements[i], i);
}
function openSidebar(driftApi, event) {
event.preventDefault();
driftApi.sidebar.open();
return false;
}
ready(function () {
drift.on('ready', function (api) {
var handleClick = openSidebar.bind(this, api)
forEachElement(DRIFT_CHAT_SELECTOR, function (el) {
el.addEventListener('click', handleClick);
});
});
});
})();
HTML
<a class="drift-open-chat">Open Chat</a>
I hope this helps someone out there.
PS: The above javascript code must be included after you have initialized your drift widget.
You need to disable that through the application: turn off the Playbooks.
Here is the link to do so: https://app.drift.com/playbooks
Hope it helps.
I am currently working on an app using firebase and angularJS (ionic). Basically this is a car management app, so you have people sharing their cars with others. I tried to structure the data as flat as possible to be efficient. My issue here is that if without problem I can display the list of the car_id of the different cars shared with the logged user, I can't find a way to display the list of cars shared with the user displaying the year and the model.
Thank you in advance for your help !
{
"rules": {
"users": {
".write": true,
"$uid": {
".read": "auth != null && auth.uid == $uid"
},
"cars": {
"car_id":true,
"role":true // Owner, borower...
}
},
"cars": {
"car_id":true,
"model":true,
"year":true
}
}
}
carapp.controller("carsController", function($scope, $firebaseObject, $ionicPopup, $ionicHistory) {
$ionicHistory.clearHistory();
$scope.list = function() {
frbAuth = frb.getAuth();
if(frbAuth) {
var userObject = $firebaseObject(frb.child("users/" + frbAuth.uid));
userObject.$bindTo($scope, "user");
$scope.cars = frb.child("cars");
}}
$scope.createCar = function() {
$ionicPopup.prompt({
model: 'Create a new car',
inputType: 'text'
})
.then(function(result) {
if(result !== "") {
var newCar = $scope.cars.push({
model: result
})
var newCarId = newCar.key();
$scope.user.cars.push({car_id: newCarId, role: "owner" });
} else {
console.log("Action not completed");
}
});
}
});
<div class="list">
<a ng-repeat="car in user.cars" >
<h2>{{car.car_id}}</h2> ----> works fine !
<h2>{{car.model}}</h2> ----> How to get this working ?
<h2>{{car.year}}</h2> ----> How to get this working ?
</a>
</div>
In the users/ path, begin by storing the list of cars by index, instead of in an array. So your structure would be:
{
"users": {
"kato": {
"cars": {
"DeLorean": true
}
}
},
"cars": {
"DeLorean": {
model: "DeLorean",
year: "1975"
}
}
}
To join this using AngularFire, you have several approaches available. An AngularFire-only solution might look like this, taking advantage of $extend:
app.factory('CarsByUser', function($firebaseArray) {
return $firebaseArray.$extend({
$$added: function(snap) {
return new Car(snap);
},
$$updated: function(snap) {
// nothing to do here; the value of the index is not used
},
$$removed: function(snap) {
this.$getRecord(snap.key()).destroy();
},
// these could be implemented in a manner consistent with the
// use case and above code, for simplicity, they are disabled here
$add: readOnly,
$save: readOnly
});
var carsRef = new Firebase(...).child('cars');
function Car(snap) {
// create a reference to the data for a specific car
this.$id = snap.key();
this.ref = carsRef.child(this.$id);
// listen for changes to the data
this.ref.on('value', this.updated, this);
}
Car.prototype.updated = function(snap) {
this.model = data.model;
this.year = data.year;
}
Car.prototype.destroy = function() {
this.ref.off('value', this.meta, this);
};
function readOnly() { throw new Error('This is a read only list'); }
});
app.controller('...', function($scope, CarsByUser, authData) {
// authenticate first, preferably with resolve
var ref = new Firebase(...).child(authData.uid);
$scope.cars = CarsByUser($scope);
});
For a more sophisticated and elegant approach, one could utilize NormalizedCollection and pass that ref into the AngularFire array:
app.controller('...', function($scope, $firebaseArray) {
var ref = new Firebase(...);
var nc = new Firebase.util.NormalizedCollection(
ref.child('users/' + authData.uid),
ref.child('cars')
)
.select('cars.model', 'cars.year')
.ref();
$scope.cars = $firebaseArray(nc);
});
Currently i am facing the following problem.
I am displaying after successful call of this ajax request.
function callDesignWindow(){
var serviceType = $("#serviceType").val();
alert(serviceType);
var ptId = $("#pt_id").val();
alert(ptId);
getAjaxPage({
url : "/ajax/NewEform/design.do?serviceType=" + serviceType +"&ptId =" + ptId,
successCallback: function (data) {
showDesignWindow(data);
}
});
searchVisible = true;
}
function showDesignWindow(htmlData){
alert(" In the show Design Window");
var designWindow = new Ext.Window({
title: "E-Form Design Phase",
width:650,
autoHeight: true,
id:'designWindow',
html: htmlData,
closable: false,
y: 150,
listeners: {
beforeclose: function () {
searchVisible = false;
}
},
buttons: [
{
text: 'Add Control', handler: function() {
saveFormControl();
}
},
{
text:'Customize', handler: function() {
designWindow.hide();
callCustomWindow();
}
}
]
});
designWindow.show(this);
}
function saveFormControl(){
alert(" add control button clicked");
if (!validateEformData()) return false;
formname= $("#formname").val();
alert(formname);
controlType= $("#controlType").val();
alert(controlType);
label= $("#labelname").val();
alert(label);
dataType= $("#dataType").val();
required= $("#required").val();
serviceType= $("#serviceType").val();
ptId = $("#ptId").val();
if(controlType == 3){
var itemList = [];
$("#selectedItemLists option").each(function(){
itemList.push($(this).val());
});
}
data = "eform_name=" + formname + "&control=" + controlType + "&serviceType=" + serviceType +"&ptId=" + ptId +"&labelName=" +label+ "&dataType=" +dataType+"&required="+required+"&items="+itemList;
alert(data);
$.ajax( {
type : "POST",
url : "/ajax/eformDetails/save.do",
data : data,
cache : false,
dataType : "text/html",
timeout: 40000,
error: function (xhr, err)
{
resolveAjaxError(xhr, err);
},
success : function(data) {
// Ext.getCmp('designWindow').close();
// showDesignWindow(data);
}
});
}
Now on success call of the ajax call ("/ajax/eformDetails/save.do") i want to update the designWindow and reset the values.
please help me in this.
If you want to be able to to manipulate our designWindow after you have already created it, you will need to either maintain a reference to it somewhere, or take advantage of the Ext.getCmp method (I would recommend the latter. For example, in your success function:
success: function () {
var myWindow = Ext.getCmp('designWindow');
//do whatever changes you would like to your window
}