I have a use case where I have a component (like a database) that I would like to expose all the information as bindable properties. However, only a few of those properties will be need by any particular client who uses it. There could be 1000's of entries in the database. How can I figure out which ones are actually needed by the client.
For example:
Polymer('database,
{
observer : {
name : function(oldVal, newVal) { onDataChanged('name', newVal);},
addr : function(oldVal, newVal) { onDataChanged('addr', newVal);},
tel.main : function(oldVal, newVal) { onDataChanged('tel.main',
etc....
}
});
In this case I would like to dynamically create observe handlers only for the data bindings that are actually needed on the fly.
If you are willing to have your clients extend your component to specify the desired database fields then you can dynamically create observers only for the fields they specify.
Example
Component
<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<polymer-element name=demo-dynamicproperties >
<template>
<h2>dynamic properties</h2>
See the console for changes
</template>
<script>
Polymer({
// Validate that it is an attribute that is allowed
// For the example we will allow anything starting with validitem
isValidAttribute: function(name) {
return (name.match('^validitem'));
},
// Get attributes
created: function() {
for (name in this.publish) {
console.log("Trying: "+name);
// Verify that it is one of the dynamic attributes
if (this.isValidAttribute(name)) {
console.log("Accepting: "+name);
this[name]="Pull from DB";
// References:
// https://www.polymer-project.org/0.5/docs/polymer/node_bind.html
// https://github.com/Polymer/NodeBind/blob/master/tests/tests.js
// https://github.com/polymer/observe-js
var observer = new PathObserver(this,name);
observer.open(makeHandler(this,name));
}
}
/************* TEST **********************************/
// Verify that dynamic updates worked by updating
this.job('update_validitem1', function() {
this.validitem1="Updated after 10 seconds";
}, 10000);
/************ End Test ******************************/
}
});
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
function makeHandler(element, property) {
function handler(newval,oldval) {
console.log("element" + element,"property:" + property,"from:"+oldval,"to:"+newval);
}
return handler;
}
</script>
</polymer-element>
Usage
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<link rel="import" href="demo-dynamicproperties.html">
<title>demo-dynamicproperties test page</title>
</head>
<body>
<polymer-element name=demo-usedb extends="demo-dynamicproperties" attributes="validitem1 validitem2 invaliditem" noscript>
</polymer-element>
<h1>Demo</h1>
<template is="auto-binding">
<h2>Dynamic tag</h2>
<demo-usedb validitem1="{{item1choice2}}" item2="setthis"></demo-usedb>
<h2>Input</h2>
<input type="text" value="{{item1choice2}}">
<h3>Produces</h3>
{{item1choice2}}
</template>
</body>
</html>
It looks like the answer to the questions is that it cannot be done. There does not appear to be any hooks or events that a component can use to get notified when properties are bound (or attempted to be bound) to it. I filed a bug/enhancement request here
https://github.com/Polymer/polymer/issues/1303
to request that this feature be supported in the future.
Related
I am using google maps in my asp.net project. When I type some address, i get suggestions, I pick one of them and map is shown related to that address. This works fine. But I want that user types address in a custom textbox on page 1 and i take that input and populate maps textbox on page 2 as well as show map on page 2 related to address.
here is how I am doing it
$(document).ready(function() {
// Empty the value on page load
$("#formattedAddress").val("");
// variable to indicate whether or not enter has been pressed on the input
var enterPressedInForm = false;
var input = document.getElementById("inputName");
var options = {
componentRestrictions: {country: 'uk'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
$("#formName").submit(function(e) {
// Only submit the form if information has been stored in our hidden input
return $("#formattedAddress").val().length > 0;
});
$("#inputName").bind("keypress", function(e) {
if(e.keyCode == 13) {
// Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.
// We change this variable to indicate that enter has been pressed in our input field
enterPressedInForm = true;
}
});
// This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
if(autocomplete.getPlace() !== undefined) {
$("#formattedAddress").val(autocomplete.getPlace().formatted_address);
}
// If enter has been pressed, submit the form.
if(enterPressedInForm) {
$("#formName").submit();
}
});
});
Regards,
Asif Hameed
You can send variables to other pages (or the same page) with the hashtag. Anything to the right hand side of the # is ignored by the server, but can be read/set by javascript.
Like on page 1 you have
25
50
This value can be read by page2, like this:
var pos = location.hash.substr(1);
Here is an example with your form
page1.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1 - type address</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
$('#formName').on('submit', function(e) {
// read address
var address = $('#formattedAddress').val();
// add hash to page 2
window.location = 'page2.htm#' + address;
// prevent real submit
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<form id="formName">
<input id="formattedAddress" placeholder="Enter address"/>
<input type="submit" value="submit" />
</form>
</body>
</html>
page2.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2 - populate map</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
if(location.hash) {
var address = location.hash.substr(1);
$('#test').html(address);
}
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Tell me if you have difficulties applying this to a Google Maps webpage.
Try out passing coordinates to page2.
like "page2.htm#50.24/4.45" =>
var variables = location.hash.substr(1);
var position = variables.split('/');
var lat = Number(position[0]);
var lng = Number(position[1]);
Or pass the search string. That should work too.
I am trying to instantiate a Google Places Autocomplete input within an Angular 2 component. I use this code to do it:
loadGoogle() {
let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] });
let that = this
//add event listener to google autocomplete and capture address input
google.maps.event.addListener(autocomplete, 'place_changed', function() {
let place = autocomplete.getPlace();
that.place = place;
that.placesearch = jQuery('#pac-input').val();
});
autocomplete.addListener()
}
Normally, I believe, I would use the callback function provided by the Google API to ensure that it is loaded before this function runs, but I do not have access to it within a component's scope. I am able to load the autocomplete input 90% of the time, but on slower connections I sometimes error out with
google is not defined
Has anyone figured out how to ensure the Google API is loaded within a component before instantiating.
Not sure whether this will help, but I just use a simple script tag in my index.html to load Google API and I never get any error. I believe you do the same as well. I post my codes here, hope it helps.
Note: I use Webpack to load other scripts, except for Google Map API.
<html>
<head>
<base href="/">
<title>Let's Go Holiday</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Map -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
And then in your component:
...
declare var google: any;
export class SearchBoxComponent implements OnInit {
ngOnInit() {
// Initialize the search box and autocomplete
let searchBox: any = document.getElementById('search-box');
let options = {
types: [
// return only geocoding results, rather than business results.
'geocode',
],
componentRestrictions: { country: 'my' }
};
var autocomplete = new google.maps.places.Autocomplete(searchBox, options);
// Add listener to the place changed event
autocomplete.addListener('place_changed', () => {
let place = autocomplete.getPlace();
let lat = place.geometry.location.lat();
let lng = place.geometry.location.lng();
let address = place.formatted_address;
this.placeChanged(lat, lng, address);
});
}
...
}
I used it the same way as explained above but as per google page speed i was getting this suggestion,
Remove render-blocking JavaScript:
http://maps.googleapis.com/…es=geometry,places®ion=IN&language=en
So i changed my implementation,
<body>
<app-root></app-root>
<script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places®ion=IN&language=en" async></script>
</body>
/* Now in my component.ts */
triggerGoogleBasedFn(){
let _this = this;
let interval = setInterval(() => {
if(window['google']){
_this.getPlaces();
clearInterval(interval);
}
},300)
}
You can do one more thing, emit events once the value(google) is received,& trigger your google task
inside them.
I’m just getting to know Handlebars a bit better as a templating solution and have hit a problem that I don’t know how to solve.
I’ve added sections to my layout, one for the header and one for the footer for dynamically inserting scripts from my views. However, only the first section ever renders. The second one (regardless of order) is always omitted.
My layout is a simple HTML page:
<!doctype html>
<html>
<head>
<title>Test site</title>
{{{_sections.head}}}
</head>
<body>
<header>
//Logo and stuff here
</header>
{{{body}}}
<script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
{{{_sections.footer}}}
</body>
</html>
And in my layout file I have:
{{#section 'head'}}
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
{{/section}}
//basic HTML here
{{#section 'footer'}}
<script>
alert("this doesn’t fire if its second!");
</script>
{{/section}}
The header section appears on the page but the footer does not. The thing is, if I put the footer at the top of the page (i.e. before the {{section ‘head’}} that then renders but the head section no longer renders.
In my app.js I’m setting up the section functionality as follows:
var handlebars = require('express3-handlebars')
.create({
defaultLayout: 'main',
helpers: {
section: function (name, options) {
if (!this._sections) {
this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
}
});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
Any ideas what I’m doing wrong here or how to add support for both sections?
Thanks
I think your sections are overwriting each other. Try changing your handlebars create to the following:
var handlebars = require('express3-handlebars')
.create({
defaultLayout: 'main',
helpers: {
section: function (name, options) {
if (!this._sections) {
this._sections = {};
}
this._sections[name] = options.fn(this);
return null;
}
}
});
I have an angularjs service which calculates a products price based on discounts, quantity, etc. I'm trying to write a jasmine test to call this service, passing in test data. I get an error that the app is missing it's dependencies. I don't want to have to load Ui router, shouldn't mocks take care of that?
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here is my Jasmine SpecRunner.html. The Web project I am testing is in a different project than my Jasmine test project.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script src="http://localhost:54411/Scripts/vendor/angular.js"></script>
<script src="http://localhost:54411/Scripts/vendor/angular-mocks.js"></script>
<script src="http://localhost:54411/Scripts/app.js"></script>
<!-- include source files here... -->
<script src="http://localhost:54411/Scripts/services/productPriceCalculatorSvc.js"></script>
<!-- include spec files here... -->
<script src="spec/ProductPriceCalculatorSpec.js"></script>
</head>
<body>
</body>
</html>
The spec file:
describe("Product Price Calculator service test", function () {
describe("when I call product price calculator.calculateCustomerDiscPrice", function () {
var sut;
beforeEach(function() {
module('quoteMasterApp');
inject(function(productPriceCalculatorSvc) {
sut = productPriceCalculatorSvc;
});
});
it('can calculate customer discount price', function() {
productPriceCalculatorSvc.calculateCustomerDiscPrice(null, null);
});
});
});
Here is my service declaration.
myApp.service("productPriceCalculatorSvc", [
function() {
return {
calculateCustomerDiscPrice: function(product, conversionRate) {
// calculations occur here
});
}
}
}
])
You need to tell the framework how to find your service.
Something like:
describe("ProductPriceCalculator", function () {
var productPriceCalculatorSvc;
beforeEach(function() {
module('productPriceCalculatorSvcFactory');
});
beforeEach(inject(function ($injector) {
productPriceCalculatorSvc = $injector.get('productPriceCalculatorSvcFactory');
}));
it('can calculate customer discount price', function () {
productPriceCalculatorSvc.calculateCustomerDiscPrice();
});
});
See more here: https://docs.angularjs.org/api/auto/service/$injector
I have the same case : test a controller that calls a service.
Here is what I have in my decribe
describe('Controller Test', function () {
var scope, ctrl;
// load your controllers including myController
beforeEach(module('mycontrollers'));
// load your services (do not forget to include them in your spec runner !)
// there should be myService defined in this module
beforeEach(module('myservices'));
// It seems a good practice to inject nothing in "it"
// Everything is injected in beforeEach
// here the controller uses theService and set some value in the scope
beforeEach(inject(function($rootScope, $controller, ReportProductService) {
scope = $rootScope.$new();
ctrl = $controller('myController', {
$scope: scope,
theService : myService
});
}));
it('should work', function () {
//verify that the controller is there
expect(ctrl).toBeDefined();
// do test
expect(scope.someExpectedValueSetByController).toBeDefined();
});
I can do a JSFiddle if you want
I can also make a better answer as my service is using $http
Please comment if you don't agree or find a better way to do it
After Commit 48 (Beta Candidate) i can't get observable array logic anymore. I know it has changed. I've read the changelog and been playing with new commit for some time but couldn't get it working. Helpers just don't update anymore. Any help appreciated.
Here is a simple example. Clicking "add friend" should call friends_names again.. but it doesn't anymore:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
</head>
<body>
<div id="people"></div>
<script id="peopleTemplate" type="text/x-jsrender">
<button id="add">Add person</button><br />
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(#data.friends)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}
</script>
<script>
var data = {
people: [
{
name: "Adams",
friends: [
{name:'Petere'},
{name:'Steve'}
]
},
{
name: "Eugenia",
friends: [
{name:'Bob'}
]
}
]
};
$.templates({
peopleTmpl: "#peopleTemplate"
});
var friends_names = function(friends){
friends = friends || []
var names = []
for (var i=0, l=friends.length; i<l; i++) {
names.push(friends[i].name);
}
return '<b>' + names.join(', ') + '</b>';
};
$.views.helpers({friends_names:friends_names});
$.templates.peopleTmpl.link("#people", data);
//debug
$.observable(data).observeAll(function (ev, obj) { console.log('change', obj); });
$("#add").on("click", function() {
$.observable(data.people).insert({
name: "Amos",
friends: []
});
})
$('#people').on('click', '.friend-add', function(e){
e.preventDefault();
var name = 'Some anonymous friend' + Math.floor((Math.random()*100)+1);
var friends = $.view(this).data.friends;
$.observable(friends).insert({
name: name
});
});
</script>
</body>
</html>
I know nested template can be used (not sure if it will solve the problem) but in real application there is much more logic in helper, thus nested template won't help.
Yes, this is deliberate: See the commit note:
Data linking to arrays is simplified and more consistent. Now tags DO NOT automatically bind to arrays, and refresh when the array
updates. {^{myTag path.to.array/}} will now update when the to.array
property is update (property change) but not when the to.array
itself changes observably. (array change). A tag should opt in to
arraybinding either by deriving from the "for" tag - as in the
'range' sample: http://www.jsviews.com/#samples/tag-controls/range,
or by following the using onAfterLink and onDispose to add/remove
the onArrayChange handler, as in the {^{myWidget .../}} sample in
the JsViews unit tests. This change relates to
https://github.com/BorisMoore/jsviews/issues/158
Here is a really simple fix. If you include the array.length as a parameter (even if your helper function doesn't use it) then JsViews will respond to changes in the array length (which is a property change, not an array change) and will trigger a refresh for your helper: ~friends_names(friends, friends.length)
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(friends, friends.length)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}