I want to show first element of dom-repeat as display on form. And other should be added by clicking on button. How this scenario could be possible in polymer. As shown in image.
As shown in above image room#1 should be display by default and from room#2 should be added on click of button.
code-
<form is="iron-form" id="form" method="post" action="/form/handler">
<template is='dom-repeat' items='{{ rooms }}'>
<div class="head">
<paper-item>
<div id="line"><span>Room# {{displayIndex(index)}}</span></div>
<template is='dom-if' if='{{displayIndex != 1}}'>
<paper-button toggles class=button on-click="deleteRoom"><img src="trash.png" height="20px" width="20px"></paper-button>
</template>
</paper-item>
</div>
<choice-form room="{{displayIndex(index)}}">{{ item.room }}</choice-form>
</template>
</form>
I would create a new array that only contains the first room (room#1) and on button click add room#2 to that array and then use this array in dom-repeat instead of rooms.
Your example contains a binding expression inside dom-if (i.e., if="{{displayIndex != 1}}"), but that's currently not supported in Polymer. You'll need to use a computed binding/property instead.
I assume rooms initially contains one item, and there's a button that adds more items to the array.
This is what that code would look like:
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
rooms: {
type: Array,
value: () => ['King']
},
_isDeleteHidden: {
type: Boolean,
computed: '_lte(rooms.length, 1)'
}
},
_lte(a, b) {
return a <= b;
},
_inc(index) {
return index + 1;
},
_deleteRoom(e) {
this.splice('rooms', e.model.index, 1);
},
_addRoom() {
this.push('rooms', this._getRandomRoom());
},
_getRandomRoom() {
const ROOMS = ['King', 'Queen', 'Double', 'Standard'];
return ROOMS[randInt(0, ROOMS.length)]
}
});
});
function randInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-button on-tap="_addRoom">Add Room</paper-button>
<template is="dom-repeat" items="[[rooms]]">
<paper-item>
<span>Room #[[_inc(index)]] ([[item]])</span>
<paper-icon-button hidden="[[_isDeleteHidden]]" icon="delete" on-tap="_deleteRoom"></paper-icon-button>
</paper-item>
</template>
</template>
</dom-module>
</body>
codepen
Is not very clear, looks you need just to do
var myRommObject = {....your-properties};
this.push('rooms',myRommObject);
inside the event handler of your button click
have a look here and here
I got the answer for my own question.
You just have to call add function once in ready method.
Following is a code.
ready: function () {
// For default first Room.
this.push('rooms', { room: "" });
this.roomCount = this.roomCount + 1;
},
addRoom: function () {
this.push('rooms', { room: "" });
this.roomCount = this.roomCount + 1;
},
Related
I am making a todo-list in javascript but whenever I add something into this list and then refresh, it is gone. How can I make it able to save, and I don't want to use cookies and would like to use this todo list across multiple devices with the todo list saving. For example, is there a way to add a container directly into my html instead of through my browser? I know of the .appendChild but that adds it only to the browser and it does not save. I need to do this without cookies.
Recreate this problem:
copy and paste the code below into a .html
open it up through your browser.
add a todo into the input box, for example "throw out the trash"
add a due date for this todo.
click the "Add Todo" button.
Refresh the page.
My code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Practice </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="todo-title" type="text" />
<input id="date-picker" type="date" />
<button onclick="addTodo();">Add Todo</button>
<div id="todo-list"></div>
<script>
const todos = [{
title: 'Get groceries',
dueDate: '2021-10-04'
}, {
title: 'Wash car',
dueDate: '2021-02-03'
}, {
title: 'Make dinner',
dueDate: '2021-03-04'
}];
//todos.push('another todo'); //Adds to an array
render();
function addTodo(){
const textbox = document.getElementById('todo-title');
const title = textbox.value;
const datePicker = document.getElementById('date-picker');
const dueDate = datePicker.value;
todos.push({
title: title,
dueDate: dueDate
});
render();
}
function render(){
//reset list
document.getElementById('todo-list').innerHTML = '';
todos.forEach(function(todo){
const element = document.createElement('div');
element.innerText=todo.title + ' is due by ' + todo.dueDate;
const todoList = document.getElementById('todo-list');
todoList.appendChild(element);
});
}
//todos.pop(); //Remove's the last string of an array
</script>
<!--<div id="counter">0</div>
<button onclick="addCount();">Up</button>
<button onclick="removeCount();">Down</button> -->
<script src="script.js"></script>
</body>
</html>
I tried to make the todo-list save after refreshing. What resulted was the todo disappearing.
Background
I've been using Vue 2 for a long time and am currently exploring Vue 3 to see what converting our existing website will entail. Because this is a conversion I plan to use the options interface for Vue 3. For the most part it seems like the conversion should be fairly painless. But I have encountered one Vue3 behavior that I find very puzzling.
Vue 2 Example
In Vue 2 if I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue#2.5.16/dist/vue.min.js"></script>
</head>
<body>
<h1>Vue2 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue2 Example
var app = new Vue({
el: '#appTemplate',
data: {
count: 101
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
});
alert("app.count is:" + app.count)
</script>
</body>
</html>
When the page loads, the alert looks like this:
This demonstrates that after the vue object is created I can access the data properties as though they hang directly off of the vue object. This is as expected since it's documented behavior.
However, Vue 3 Behaves Differently for Me
Here is a block of analogous Vue3 code with a bit of extra code you will probably notice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var _app;
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
);
app.mount("#appTemplate");
//It's really odd that we can't access the property this way:
alert("app.count is:" + app.count);
//but this works.
alert("_app.count is:" + _app.count);
</script>
</body>
</html>
When this page loads and the first alert box is shown, app.count is undefined.
To explore this a bit more you can see in the code that I set the value of an _app variable to the value of this in the created method. And I show a 2nd alert on load that displays _app.count. And sure enough that works and displays the correct value:
So that's pretty interesting. Is it by design in Vue 3 data properties can't be accessed directly from the vue object or is something wrong with my code? It seems like a really big change from Vue 2 if it's by design. So I'd like to hope that it's not.
So here is the question: Why can't I access count via app.count after the var app = Vue.createApp ?
In Vue 2, new Vue() returns the root component.
In Vue 3, createApp() returns the application instance, and the root component is returned from the application instance's mount():
var app = Vue.createApp({
data() {
return {
count: 101,
}
}
})
👇
var root = app.mount('#appTemplate')
console.log(root.count) // => 101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
);
var root = app.mount("#appTemplate");
alert("root.count is:" + root.count);
</script>
</body>
</html>
Alternatively, you could chain the mount() call off of createApp():
var app = Vue.createApp().mount('#appTemplate')
console.log(app.count) // => 101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.5/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3 app.variable example</h1>
<!-- vue template -->
<div id="appTemplate">
<div style="margin-bottom:20px">Count: <span v-text="count"></span></div>
<button v-on:click="increment()">Increment</button>
</div>
<script type="text/javascript">
//Vue3 OptionsAPI
var app = Vue.createApp({
data: function() {
return {
count: 101
}
},
methods: {
increment: function() {
this.count++;
}
},
created: function(){
_app = this;
}
}
).mount("#appTemplate");
alert("app.count is:" + app.count);
</script>
</body>
</html>
You could also access that property before mounting the app :
app._component.data().count
i am making iron ajax call to server i am getting the response as array of object of array as json
[{"dms":[{"serialNo":"EG0022","status":"running","firmwareStatus":"ok","latitude":37.8688,"longitude":-144.2093,"toolType":1},{"serialNo":"EG0022","status":"running","firmwareStatus":"ok","latitude":31.8688,"longitude":-115.2093,"toolType":1}],"gyro":[{"serialNo":"EG0022","status":"running","firmwareStatus":"ok","latitude":37.8688,"longitude":-144.2093,"toolType":1},{"serialNo":"EG0022","status":"running","firmwareStatus":"ok","latitude":31.8688,"longitude":-115.2093,"toolType":1}]}]
in the success response when i am calling success method and printing the data i am getting [object,object] in console, how should i parse this object of array of object in the success method?
<!-- import polymer -->
<script src="../../bower_components/webcomponentsjs/webcomponentslite.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/paper-item/paperitem.html">
<link rel="import" href="../../bower_components/paper-listbox/paperlistbox.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paperdropdown-menu.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<!-- seed app components -->
<dom-module id="tool-bar">
<template>
<iron-ajax
id="ajax"
url=" rest URL"
params='{"type":"all"}'
handle-as="json"
content-type="application/json"
method="GET"
on-response="mapResponse"
debounce-duration="3000">
</iron-ajax>
</template>
<script>
Polymer({
is : 'tool-bar',
properties: {
gyrodata: {
type: Array
}
},
mapResponse: function (data) {
console.log(data.detail.response); //[Object,Object]
}
});
</script>
</dom-module>
parsed the json with three for loops, so my success function goes:-
mapResponse: function (data) {
var dummy = data.detail.response;
for(var i = 0;i < dummy.length; ++i) {
for (var x in dummy[i]) {
for (var t = 0; t < dummy[i][x].length; t++) {
console.log(dummy[i][x][t].serialNo);
console.log(dummy[i][x][t].status);
console.log(dummy[i][x][t].firmwareStatus);
}
}
}
}
Le me know for any simpler solution
I am not able to figure out why remove tab is not invoked when I use ng-click but it works fine in non Angular way! I referred help available in http://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/AngularJS/add-new-tabs-dynamically.html.
I have written code in dojo.telerik.com/#datha_k/oNuBI. I'm clueless here, tried a lot, please help.
I think my issue related to this discussion at http://www.telerik.com/forums/use-angularjs-directive-in-tab-content 'The tabstrip widget does not support angularjs binding expressions'. Any work around to suggest?
Hi ,due to some reason i m unable to login in DOJO to edit ur code,below code will work -
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/tabstrip/index">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="app-myapp" ng-controller="my-controller as my">
<button ng-click="newTab($event)">Click to add new tab</button>{{show}}
<hr />
<div kendo-tab-strip="tabstrip" id="tabstrip" k-options="tabOptions"></div>
</div>
<script>
function removeMeNonNg(e) {
e.preventDefault();
e.stopPropagation();
var item = $(e.target).closest(".k-item");
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.remove(item.index());
tabstrip.select(0);
}
angular.module("app-myapp", ["kendo.directives"]) // Create module and pass kendo dependency
.controller("my-controller", function ($scope, $timeout) { // Create controller
var index = 1;
$scope.tabOptions = {
dataTextField: "text",
dataContentField: "content",
dataSource: [{
text: index,
content: '<div>Hello World!</div>' + index
}]
}; // tabOptions
$scope.newTab = function newTab(event) {
index++;
$scope.tabstrip.append({
text: index + ' <button onclick="removeMeNonNg(event)">Remove me in non NG!</button> ',
encoded: false,
content: '<div><button ng-click="removeTab(\''+index+'\')">Remove me!</button>Hello World, Again!</div>' + index
});
}; // newtab
$scope.removeTab = function (index) {
$scope.tabstrip.remove(index-1);
};
$timeout(function () {
$("#tabstrip").data("kendoTabStrip").select(0);
}, 50);
});
</script>
</body>
</html>
The problem with your code are 2-
1)Either use jquery or ANgular for components or else u will face anonymous behaviour.I have corrected your code for appending tabs in angular kendo.
2)You have to call ng-click from content attribute and not text attribute of kendo-tabstrip
I am totally new to polymer.I want to draw a graph...
I have one html where I include attributes like this... for the dom module
<some-container content_content-type = 'Real Estate' content_content-num = 'PF HP 001078' key-type = 'vpn_key' graphmax = 620000 graphmin = 540000 currency = 'USD' oldvalue-amount = 550000 new-value-amount = 2300 new-valuecolor = 'green-text' new-valueplusminus = '+' morelink = '#' containerlink = 'education.html' graphdata = [['Tue', 600000],['Wed', 590000],['Thu', 580000],['Fri', 575000],['Sat', 590000],['Sun', 575000],['Mon', 550000],['Tue', null]]></some-container>
Now I want to send this array graphdata as parameter… as I sent the others like… content_content-type, content_content-num, etc.
<dom-module id="some-container">
<template>
….HTML…
</template>
<script>
Polymer({
is: 'some-container',
properties: {
content_contentType: {
type: String,
notify: true
},
content_contentNum: {
type: String,
notify: true
},
….
graphdata: {
type: Array,
value: []
},
….
};
attached: function() {
this._drawgraph(this.graphmax,this.graphmin,this.graphid,this.graphdata); // _drawgraph is some other function where functionality/calculations are…
//If I debug I see this.graphmax, this.graphmin has data… but not this.graphdata
},
But I see that this.graphdata is not getting data. Its undefined.
Any suggestion how do I pass the array from the external HTML
To pass quoted [JSON|Array] to element property directly in HTML you must invert the quotes. The attribute value must be surrounded by single quotes and the actual string must use double quotes. Otherwise Polymer fails to parse it, because single quotes are not correct JSON syntax. Thus your code should be
<some-container graphdata='[["Tue", 600000],["Wed", 590000],["Thu", 580000],["Fri", 575000],["Sat", 590000],["Sun", 575000],["Mon", 550000],["Tue", null]]'></some-container>
It would seem that the way it is parsed it is treated as JSON by Polymer, so you have to always use single quotes for array attributes, and double quotes inside the array.
Here's a working example, it seems a little slow to run on StackOverflow, but it should work after some few seconds.
<!doctype html>
<html>
<head>
<title>Testing App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/polymer+:master/components/polymer/polymer.html">
</head>
<body>
<dom-module id="example-element">
<template>
<template is="dom-repeat" items="[[_processArray(graphdata)]]">
<p>[[item.key]]: [[item.value]]</p>
</template>
</template>
<script>
Polymer({
is: 'example-element',
properties: {
graphdata: {
type: Array
}
},
_processArray(arr) {
var processed = [];
for (var i = 0; i < arr.length; i++) {
processed.push({
key: arr[i][0],
value: arr[i][1]
});
}
return processed;
}
});
</script>
</dom-module>
<example-element graphdata='[["Tue", 600000],["Wed", 590000],["Thu", 580000],["Fri", 575000],["Sat", 590000],["Sun", 575000],["Mon", 550000],["Tue", null]]'></example-element>
</body>
</html>