Observer will not work in a behavior? - polymer

I found that only when I break out a observer into a behavior, no change will be detected. Are observers not able to be used in behaviors?
<iron-ajax
auto="[[activated]]"
url="[[HOST]][[LISTINGS]]/[[listingNumber]]"
handle-as="json"
verbose="true"
with-credentials="true"
on-error="_error"
loading="{{loading}}"
last-error="{{apiError}}"
last-response="{{listing}}"></iron-ajax>
</template>
<script>
Polymer({
is: 'single-listing',
behaviors: [ApiConstants, IronAjaxHelpers],
<script>
IronAjaxHelpers = {
listingNumber: {
type: Number,
value: 0,
notify: true
},
activated: {
type: Boolean,
value: false,
observer: 'setListingNumber'
},
setListingNumber: function(newValue, oldValue) {
console.log(newValue);
//this.listingNumber = id;
if (newValue === true) {
this.listingNumber = app.listingNumber;
}
}
};
</script>

Your behavior's properties should be defined inside the properties field, but it's currently at the top-level of the behavior object.
You should declare the properties inside the behavior like this:
IronAjaxHelpers = {
properties: {
/** PROPERTIES GO HERE **/
listingNumber: {
type: Number,
value: 0,
notify: true
},
activated: {
type: Boolean,
value: false,
observer: "setListingNumber"
}
},
setListingNumber: function(newValue, oldValue) {
console.log(newValue);
}
};
codepen

Related

KendoGrid: can't disable autosync + all other lines are disabled after "destroy"

I tried so solve this for a while now, but cannot find the solution.
I cannot disable autosync for some reason. Everytime I click on "destroy" for a single row, transport.submit is triggered (and would send data to the server). I actually only want to trigger submit once, when I click the "save" button.
Is this expected behaviour? Should I handle the server communications externaly and only save locally in transport.submit? Or am I doing something wrong?
Once I remove one item using the "destroy" button, all other items are disabled until I press the "cancel" button.
How can I avoid this?
Here is my Code:
$(document).ready(function () {
var myData = getDataSource();
var dataGrid = $("#divOverview").kendoGrid({
dataSource: myData,
sortable: true,
filterable: true,
pageable: true,
toolbar: ["save", "cancel"],
columns: [
// Dataworld
{ field: "Dataworld", width: "180px" },
// Servername
{ field: "Servername"},
// IPAddress
{ field: "IPAddress"},
// Commands
{ command: ["destroy"], title: " ", width: "250px" }
],
editable: {
mode: "inline",
confirmation: false
}
});
});
function getDataSource(){
var datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: "../AccountSyncConfig/GetAccountSyncConfig.erb",
dataType: "json",
data: {mandatorID: mandatorID},
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
submit: function(e) {
var data = e.data;
console.log(data);
},
parameterMap: function(data, type) {
if (type == "read") {
return { mandatorID: mandatorID};
} else if (type == "submit") {
//console.log( {models: JSON.stringify(data.models)} );
return {
data: kendo.stringify({
mandatorID: mandatorID,
models: data.models
})
};
} else {
return "";
}
}
},
schema: {
model: {
id: "EntryID",
fields: {
Dataworld: {
type: "string",
validation: {
required: true
}
},
Servername: {
type: "string",
validation: {
required: true
}
},
IPAddress: {
type: "string",
validation: {
required: true,
IPAddressvalidation: function (input) {
if (input.val() != "") {
input.attr("data-IPAddressvalidation-msg", "Ungültige IP-Adresse");
return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(input.val());
}
return true;
}
}
}
},
}
},
autoSync: false,
batch: true,
pageSize: 10
});
return datasource;
}

vuetify vue.js pug - Show title only when more then one option group is displayed

The heading should only be displayed in a vuetify component if more than one option group is displayed.
If only one option group is displayed, the heading should not be displayed.
I need a code like:
if (e-switch-option more than one) --> display, else display none
let name = 'm-list-options';
export default {
name: name,
mixins: [switchList],
props: {
name: {
type: String,
default: name
},
dividers: {
type: Boolean,
default: false
},
section: {
type: Object,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
optionClass() {
return [
'ma-0',
{
'e-switch-option__disable-events': this.disabled
}
]
},
}
}
<template lang="pug">
v-layout(wrap)
v-flex(xs12)
m-list(:items="section.children" v-on="$listeners" :dividers="dividers")
template(#title="") {{section.title}}
template(#template="{item, index}")
e-switch-option(:value="index"
:key="`option-${item.id}`"
:class="optionClass"
v-bind="$attrs"
v-on="$listeners") {{item.title}}
</template>

dom-repeat return me "Cannot read property 'apply' of undefined" when I try display an array inside an object

I receive this error in the browser console whilst using dom-repeat:
Cannot read property 'apply' of undefined
When I try display an array inside an object in a dom-repeat,
the code is:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hola-mundo">
<style>
h1{
color: blue;
}
</style>
<template>
<button on-tap="test">myButton</button>
<template is="dom-repeat" items="{{myObject.parameters}}">
<div>{{item.name}}</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "hola-mundo",
properties: {
myObject: {
type:Object,
value: {
parameters: {
type: Array,
value: []
},
color: {
type: String,
value: 'red'
}
}
}
},
test: function(){
this.push('myObject.parameters', { 'id': '1', 'name': 'test'});
},
});
</script>
it is mandatory that the array be inside the object
Can someone correct my code? I would appreciate help in this.
Thanks
UPDATE 1:
In this stackoverflow question an reponse is selected as valid but it doesn't work for me:
Polymer dom-repeat error parsing the array inside the object
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hola-mundo">
<style>
h1{
color: blue;
}
</style>
<template>
<button on-tap="test">myButton</button>
<h1>Hola Mundo <span>{{nombre}}</span></h1>
<template is="dom-repeat" items="{{rooms.ports}}">
<div>{{item.portName}}</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "hola-mundo",
properties: {
rooms: {
type: Array,
value: [
{
name: "Room1",
maxPorts: 16,
ports: {
type: Array,
value: [
{portName: "Port 1",portStatus: "true"},
{portName: "Port 2",portStatus: "true"},
{portName: "Port 3",portStatus: "true"},
{portName: "Port 4",portStatus: "true"},
]
}
}
]
},
},
test: function(){
this.push('rooms.ports', {portName: "Port 4",portStatus: "true"});
},
});
</script>
This:
properties: {
myObject: {
type: Object,
value: {
parameters: {
type: Array,
value: []
},
color: {
type: String,
value: 'red'
}
}
}
}
is not working because you're trying to "define" parameters and color as if they were properties (when instead they're just part of myObject's value) but in fact you're assigning the object literal
{
parameters: {
type: Array,
value: []
},
color: {
type: String,
value: 'red'
}
}
as value of myObject property. So myObject.parameters in this case is an Object instead of an Array thus this.push fails.
Try by defining myObject this way:
properties: {
myObject: { // Define properties at this level only
type: Object,
value: {
parameters: [], // Parameters is initially an empty array
color: 'red',
}
}
}

Why don't default nested Polymer values work?

I am using the latest 2.0-preview version of Polymer. I'd like to set default properties, and the Polymer documentation describes how to do it in Polymer 1.x. I was unable to find any changes in this approach for v2.0. But it seems to only work for primitive properties and not objects:
"use strict";
class NewElement extends Polymer.Element {
static get is() {
return 'new-element';
}
static get config() {
return {
properties: {
user: {
// type: Object, <-- doesn't help anyway
firstName: {
type: String,
value: "John",
// observer: '_callObserver' <-- FYI observers don't work properly too if this usage...
},
lastName: {
type: String,
value: "Doe"
}
},
position: {
type: String,
value: "Waiter" // <-- will set a high-level default value properly correctly
}
},
// observers: [
// '_callObserver(user.*)' <-- ...but works using this approach
// ]
}
}
constructor() {
super();
console.dir(this); // <-- see screenshots below
// this.user = { firstName: "John", lastName: "Doe" }; <-- works if initialized manually
}
}
customElements.define(NewElement.is, NewElement);
As you can see here there is a getter, and when I click on it, I see that user field is undefined.
What am I doing wrong?
It looks like you're trying to nest property declarations, which is not supported. You can declare an object property that contains subproperties (not property declarations that have type, observer, etc.).
The user property declaration:
properties: {
user: {
type: Object,
firstName: {
type: String,
value: "John",
},
lastName: {
type: String,
value: "Doe"
}
},
},
should actually look like this:
properties: {
user: {
type: Object,
value: function() {
return {
firstName: "John",
lastName: "Doe"
};
}
},
},
codepen

Polymer iron-jsonp-library component's on-data event not getting called

I am using polymer 1.0's iron-jsonp-library component to fire a cross domain call to get data. My below component's code fires the jsonp request successfully and i get the expected json data in the response. But the event specified in the "on-data" attribute of iron-jsonp-library doesn't fire. There are no javascript errors prompted in the console. Hence could not figure out what is wrong. The on-data attribute works successfully in the sample application posted by angular team member at https://github.com/surma/polymer-reddit-api. But for my cross domain call the iron-jsonp-lib component is not working as expected.
Am i doing anything wrong?
<link rel="import" href="bower_components/iron-jsonp-library/iron-jsonp-library.html">
<dom-module id="galpicker-api">
<template>
<iron-jsonp-library on-data="_loadNewData" library-url="[[_requestUrl]]" callbackName="_ajaxLoad"></iron-jsonp-library>
</template>
<script>
Polymer({
is: 'galpicker-api',
properties: {
searchtext: {
type: String,
reflectToAttribute: true,
notify: true
},
employees: {
type: Array,
readOnly: true,
value: function() {
return [];
},
notify: true
},
baseUrl: {
type: String,
reflectToAttribute: true,
value: 'https://example.com'
},
_requestUrl: {
type: String,
readOnly: true,
computed: '_computeUrl(baseUrl, searchtext)',
notify: true
}
},
_computeUrl: function(baseUrl, searchtext) {
return baseUrl + '/api/v1/Employees/search?q=' + searchtext + '&jsonp=%%callback%%';
},
_loadNewData: function(ev) {
alert(ev);
this._setEmployees(
ev.detail[0].map(function(employee) {
return {
firstName: employee.firstName,
lastName: employee.lastName,
department: employee.department
};
}));
},
_data: function(ev) {
alert(ev);
},
_ajaxLoad: function(data){
alert(data);
}
});
</script>
</dom-module>
One error is found: callbackName="_ajaxLoad" should be written callback-name=(...). If it is still usefull...