I am building an Angular 1.5 component that wraps Chosen list, which needs to be initialized by calling .chosen() on the jQuery element. I can do that using the $postLink lifecycle callback, and something like $('.chosen-select').chosen(), which works fine. However, I can anticipate someone using multiple instances of the component on the same page, so using a class selector would not necessarily get the component you want.
I tried using an id selector instead, by adding a prefix to whatever id someone assigns to the component in HTML. For example, I may use the component like <chosen-select id="roles"></chosen-select> and in the template if have <select id="cs-{{$ctrl.id}}"> (in the controller, I bind id: '#'). This all works as expected EXCEPT that in $postLink, the select element has been created (and other bindings, such as the one that lists options, resolved) but id is still "cs-{{$ctrl.id}}". At what point does that become "cs-roles" (which is what it is in the DOM when everything has been set up)? What is the best way to ensure that I am accessing the object that belongs to this component?
Here is the component code, which works:
template:
<select id="cs-{{$ctrl.id}}" class="chosen-select"
ng-options="(option.name || option) for option in $ctrl.options track by (option.id || option)"
ng-model="$ctrl.result"
>
</select>
component:
mymod.component('chosenSelect', {
templateUrl: 'shared/components/chosenSelectComponent.html',
controller: chosenSelectController,
bindings: {
id: '#',
options: '<',
config: '<?',
selected: '<?',
doChange: '&?'
}
});
function chosenSelectController() {
var vm = this;
vm.result = vm.selected || vm.options[0];
vm.$postLink = function() {
// would like to use ("#cscomp-" + vm.id) to make sure it is unique,
// but id doesn't seem to have been resolved yet in select element
$(".chosen-select")
.chosen(vm.config)
.on('change', function(evt, params) {
// parms.selected also holds result
vm.doChange({ value: vm.result });
});
};
}
I realized I could use a hierarchical selector to solve the problem. In the $postLink function, referencing $("#" + vm.id + " .chosen-select") does exactly what I want it to by narrowing the selection to only elements that are descendants of the element with the specified id.
Related
We can use variables in aura components to concatenate some expression, we have to use variable name itself in lwc components, while looping how to change the lwc comp variable in js file.
I tried to access the dom using this.template.querySelector(); but this one is only giving the value if I use a rendered callback.
<template for:each={documentLinks} for:item="item">
//here I need to pass the item.ContentDocument.LatestPublishedVersionId to the end of a URL string
<img src={item.srcUrl} alt="PDF"/>
we can modify the returned data from apex but the data is proxy we cannot modify it.
One of the possible solutions to change the URL on the dom when it loads is to change the returned data from the server. here, In lightning web components the returned data is a proxy object, only readable. so we have to clone it(there are multiple ways to clone it), to make any changes. but here what I did.
therefore, overrides array is going to be the new data.
let overrides = [];
let newData = {
contentDocs: data[i],
srcUrl: '/sfc/servlet.shepherd/version/renditionDownloadrendition=thumb120by90&versionId=' + data[i]['ContentDocument']['LatestPublishedVersionId']
};
makeLoggable(newData);
overrides.push(newData);
function makeLoggable(target) {
return new Proxy(target, {
get(target, property) {
return target[property];
},
set(target, property, value) {
Reflect.set(target, property, value);
},
});
}
I want to use Wickedpicker in Aurelia. I added the following codes in HTML file:
<require from="wickedpicker"></require>
<input type="text" name="timepicker" class="timepicker"/>
...
And in View-Model I have this code:
import "wickedpicker"
.
.
constructor(){
let options = {
now: "12:35", //hh:mm 24 hour format only, defaults to current time
twentyFour: false, //Display 24 hour format, defaults to false
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
close: 'wickedpicker__close', //The close class selector to use, for custom CSS
hoverState: 'hover-state', //The hover state class to use, for custom CSS
title: 'Timepicker', //The Wickedpicker's title,
showSeconds: false, //Whether or not to show seconds,
timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
secondsInterval: 1, //Change interval for seconds, defaults to 1,
minutesInterval: 1, //Change interval for minutes, defaults to 1
beforeShow: null, //A function to be called before the Wickedpicker is shown
afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
show: null, //A function to be called when the Wickedpicker is shown
clearable: false, //Make the picker's input clearable (has clickable "x")
};
let timepicker = $('.timepicker').wickedpicker(options);
I installed wickedpicker via jspm (jspm install npm:wickedpicker) and when I click on input box there is no effect and no error.
Could you please help me?
Don't do it in view model's constructor. Define this in attached() method instead. attached() is called when the view is attached to DOM. At that moment you will have all elements in the DOM. When you call it from the constructor, the view is not yet initialized, hence jQuery cannot find .timepicker element.
class ViewModel {
attached() {
let options = { ... };
$('.timepicker').wickedpicker(options);
}
detached() {
// ...
}
}
There's also detached() method that you should use to clean up (destroy the plugin instance). However, it doesn't seem that Wickedpicker has the destroy support.
More info on Aurelia's view model lifecycle can be found in Dwayne Charrington's post.
Few more tips:
Once you make it work, encapsulate it to a custom attribute or a custom element. It's always a good idea not to work with DOM in regular view models.
Use ref to name elements in the view and use them from within view model. I.e. <input ref="timepicker"... and then in view model you can use $(this.timepicker).... More info can be found in another SO question.
I want to share some data from template to another template using Meteor. I have a template i.e allInventory.html on which i am showing some data in table form i added three links there that is. one for view , edit and delete what i want iam getting all the data from backend into one of helper i.e productDetails and i bind an event with view button that will take the data of current user clicked on which product so i have successfully getting the data at my allinventory template but there is another template i.e productDetails on which i want to render or show that data. But stuck with that i have data on allInventory click event but not know how do ishare the same with productDetails template.
Here is my allInventory.js
Template.allInventory.rendered = function() {
Template.allInventory.events({
"click .btn":function (e){
data = $(e.target).attr('data');
Router.go('productDetail', {data: $(e.target).attr('data')}, {query: 'q=s', hash: 'hashFrag'});
console.log("button clicked.."+data);
console.log(data);
}
})
ProductDetails.js
Template.productDetail.rendered = function () {
Template.productDetail.helpers({
productDetails: function() {
return data;
}
});
allInvenrtory.html
<button type="button" data ="{{productInfo}}" class="btn btn-info btn-sm"><i class="fa fa-eye"></i>View</button>
I just simply want to share allInventory template data with productsDetails template.
Any help would be appriciated!
Thanks
I'd recommend avoiding Session for this purpose, since it is a global object, but more importantly, because there are better ways to do it.
You can pass data from the parent templates to the child template using helpers: https://guide.meteor.com/blaze.html#passing-template-content
You can pass data from the child to the parent templates using callbacks https://guide.meteor.com/blaze.html#pass-callbacks
I'd structure this app to have a container (page) template, which will have all the subscriptions and render one of your templates based on the URL.
You can use the Session variable if you want to share data between templates.
You can follow this guide:
http://meteortips.com/first-meteor-tutorial/sessions/
I would put both template in a third, parent template.
ParentTemplate
-SharedInfo
-KidTemplate1
-KidTemplate2
Then having this third template hold the information you want to share across templates.
For that you can use a ReactiveVar, ensuring that change by template1 code on the parent template is visible in template2 as well.
To access the parent template for the kids, you can do something along those lines :
Blaze.TemplateInstance.prototype.parentTemplate = function (levels) {
var view = Blaze.currentView;
if (typeof levels === "undefined") {
levels = 1;
}
while (view) {
if (view.name.substring(0, 9) === "Template." && !(levels--)) {
return view.templateInstance();
}
view = view.parentView;
}
};
I have a template called 'contacts'. Inside is an #each which renders the template 'contact'. The user can press the 'edit' button which sets a session variable with the mongo id of the edited row. The row then reactively re-renders into "edit" mode.
Template.contact.viewEditing = function() {
return Session.get("contactViewEditingId") === this._id;
}
The html uses the viewEditing helper a few times, for instance:
{{#if viewEditing}}
<div class="panel-heading">EDITING!</div>
{{/if}}
I need to bind some javascript in the .rendered(). I would like to check again if we are editing. I can think of 2 options:
Should I call Template.content.viewEditing() inside my template.rendered() ? Does this save on reactivity calculations?
Or should I just copy pasta the if statement. This option seems to violate DRY.
Option 1:
Template.contact.rendered = function() {
if( Template.contact.viewEditing.call(this.data) ) {
// Bind some fancy jQuery
bindEditInPlace(this.data);
}
}
Option 2:
Template.contact.rendered = function() {
if( Session.get("contactViewEditingId") === this._id ) {
// Bind some fancy jQuery
bindEditInPlace(this.data);
}
}
I think that putting {{viewEditing}} multiple times in your template doesn't "cost" anything extra. So logically I would think that using this helper elsewhere is better. Maybe I need more help understanding reactivity calculations. Thanks!
Helpers are run inside a Deps.Computation, which means that every time a reactive variable is referenced and modified in a helper, it will re-run.
Template.rendered is a callback that runs each time the template is re-rendered (which usually happens when a helper in the template is re-run reactively), but it is not itself a reactive computation.
So it doesn't matter using either the template helper or copy-pasting its code inside your rendered callback : both ways won't trigger a reactive computation invalidation because we are not inside one.
As far as DRY is concerned, you could refactor your code like this :
function isContactViewEditing(contactView){
return Session.equals("contactViewEditingId",contactView._id);
}
Template.contact.helpers({
viewEditing:isContactViewEditing
});
Template.contact.rendered=function(){
if(isContactViewEditing(this.data)){
//
}
};
I think saimeunt's answer is correct, especially if you have more complex logic in the function which you don't want to replicate.
Create a local function which you can re-use in both the helper and the .rendered callback.
If you had a case where you wanted to use a reactive source minus the reactivity you could make it non-reactive by wrapping it in a Deps.nonreactive function likes so:
Deps.nonreactive(function(){
//Reactive stuff here
});
Regarding reactivity concerns, pay attention to his change from using Session.get to Session.equals. Session.get will cause any reactive computation it is used in to re-calculate on every change of the session variable. So if you use this helper in multiple places with different ids, and you change the session variable, every single one will re-calculate and re-render the templates they are used in. Session.equals only invalidates a computation when the equality changes. So changing the session variable from one non-equal id to another non-equal id will not cause the computation/template to re-run when you use Session.equals.
For your specific example where the helper is only returning the result of a Session.equals you might consider creating a global handlebars helper that can do this for you with any session variable and any value. Like the following.
Handlebars.registerHelper('sessionEquals', function (key, value) {
return Session.equals(key, value);
});
Then in the template use it like so:
{{#if sessionEquals 'contactViewEditingId' _id}}
<div class="panel-heading">EDITING!</div>
{{/if}}
In the template when rendering an item that is editable add a unique class name to mark the item as editable. Then in your Template.rendered callback when binding the javascript use a selector which looks for that class and only binds to elements with that special class.
I can't seem to figure out how to search in a dijit.Tree, using a ItemFileWriteStore and a TreeStoreModel. Everything is declarative, I am using Dojo 1.7.1, here is what I have so far :
<input type="text" dojoType="dijit.form.TextBox" name="search_fruit" id="search_fruit" onclick="search_fruit();">
<!-- store -->
<div data-dojo-id="fruitsStore" data-dojo-type="dojo.data.ItemFileWriteStore" clearOnClose="true" urlPreventCache="true" data-dojo-props='url:"fruits_store.php"'></div>
<!-- model -->
<div data-dojo-id="fruitsModel" data-dojo-type="dijit.tree.TreeStoreModel" data-dojo-props="store:fruitsStore, query:{}"></div>
<!-- tree -->
<div id="fruitsTree" data-dojo-type="dijit.Tree"
data-dojo-props='"class":"container",
model:fruitsModel,
dndController:"dijit.tree.dndSource",
betweenThreshold:5,
persist:true'>
</div>
The json returned by fruits_store.php is like this :
{"identifier":"id",
"label":"name",
"items":[{"id":"OYAHQIBVbeORMfBNZXFGOHPdaRMNUdWEDRPASHSVDBSKALKIcBZQ","name":"Fruits","children":[{"id":"bSKSVDdRMRfEFNccfTZbWHSACWbLJZMTNHDVVcYGcTBDcIdKIfYQ","name":"Banana"},{"id":"JYDeLNIGPDBRMcfSTMeERZZEUUIOMNEYYcNCaCQbCMIWOMQdMEZA","name":"Citrus","children":[{"id":"KdDUfEDaKOQMFNJaYbSbAcAPFBBdLALFMIPTFaYSeCaDOFaEPbJQ","name":"Orange"},{"id":"SDWbXWbTWKNJDIfdAdJbbbRWcLZFJHdEWASYDCeFOZYdcZUXJEUQ","name":"Lemon"}]},{"id":"fUdQTEZaIeBIWCHMeBZbPdEWWIQBFbVDbNFfJXNILYeBLbWUFYeQ","name":"Common ","children":[{"id":"MBeIUKReBHbFWPDFACFGWPePcNANPVdQLBBXYaTPRXXcTYRTJLDQ","name":"Apple"}]}]}]}
Using a grid instead of a tree, my search_fruit() function would look like this :
function search_fruit() {
var grid = dijit.byId('grid_fruits');
grid.query.search_txt = dijit.byId('search_fruit').get('value');
grid.selection.clear();
grid.store.close();
grid._refresh();
}
How to achieve the same using the tree ? Thanks !
The refreshing of a dijit.Tree becomes a little more complicated, since there is a model involved (which in grid afaik is inbuilt, the grid component implements query functionality)
Performing search via store
But how to search, thats incredibly easy whilst using the ItemFileReadStore. Syntax is as such:
myTree.model.store.fetch({
query: {
name: 'Oranges'
},
onComplete: function(items) {
dojo.forEach(items, function(item) {
console.log(myTree.model.store.getValue(item, "ID"));
});
}
});
Displaying search results only
As shown above, the store will fetch, the full payload is put into its _allItemsArray and the store queryengine then filters out what its told by query argument to the fetch method. At any time, we could call fetch on store, even without sending an XHR for json contents - fetch with query argument can be considered as a simple filter.
It becomes slightly more interesting to let the Model know about this query.. If you do so, it will only create treeNodes to fill the tree, based on the returned results from store.fetch({query:model.query});
So, instead of sending store.fetch with a callback, lets _try to set model query and update the tree.
// seing as we are working with a multi-parent tree model (ForestTree), the query Must match a toplevel item or else nothing is shown
myTree.model.query = { name:'Fruits' };
// below method must be implemented to do so runtime
// and note, that the DnD might become invalid
myTree.update();
Refreshing tree with new xhr-request from store
You need to do exactly as you do with regards to the store. Close it but then rebuild the model. Model contains all the TreeNodes (beneath its root-node) and the Tree itself maps an itemarray which needs to be cleared to avoid memory leakage.
So, performing following steps will rebuild the tree - however this sample does not take in account, if you have DnD activated, the dndSource/dndContainer will still reference the old DOM and thereby 'keep-alive' the previous DOMNode hierachy (hidden ofc).
By telling the model that its rootNode is UNCHECKED, the children of it will be checked for changes. This in turn will produce the subhierachy once the tree has done its _load()
Close the store (So that the store will do a new fetch()).
this.model.store.clearOnClose = true;
this.model.store.close();
Completely delete every node from the dijit.Tree
delete this._itemNodesMap;
this._itemNodesMap = {};
this.rootNode.state = "UNCHECKED";
delete this.model.root.children;
this.model.root.children = null;
Destroy the widget
this.rootNode.destroyRecursive();
Recreate the model, (with the model again)
this.model.constructor(this.model)
Rebuild the tree
this.postMixInProperties();
this._load();
Creds; All together as such, scoped onto the dijit.Tree:
new dijit.Tree({
// arguments
...
// And additional functionality
update : function() {
this.model.store.clearOnClose = true;
this.model.store.close();
delete this._itemNodesMap;
this._itemNodesMap = {};
this.rootNode.state = "UNCHECKED";
delete this.model.root.children;
this.model.root.children = null;
this.rootNode.destroyRecursive();
this.model.constructor(this.model)
this.postMixInProperties();
this._load();
}
});