<template is="dom-repeat" items="[[routes]]">
<div>{{item.color}} | {{item.Index}}</div>
<google-map-directions id="{{item.name}}"
renderer-options='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="DRIVING"
waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'>
</google-map-directions>
<div id="dirt"></div>
</template>
I am creating some routes using dom-repeat. I would like these routes to have different colors. They don't. It seems as if each route is using the same renderer. How can I change the renderer for each route?
It turns out the only missing piece in your code is one character for the attribute-binding.
In order for the compound binding to be deserialized into a JSON object, the following is required:
attribute-binding syntax (i.e., $=) even though binding to a property
Single-quotes around the value instead of double-quotes
the target property must be of type Object (which is true for <google-map-directions>.rendererOptions)
// template
<google-map-directions map="[[map]]"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
... >
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
}
});
});
</script>
</dom-module>
</body>
codepen
Alternatively, you could use a computed binding that returns the appropriate renderer options based on a given color and route index:
// template
<google-map-directions map="[[map]]"
renderer-options="{{_getRendererOptions(item.color, index)}}"
... >
// script
Polymer({
...
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options="{{_getRendererOptions(item.color, index)}}"
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
},
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
});
</script>
</dom-module>
</body>
codepen
Related
The following is my code, an example on echarts, referring to echarts.min.js, but changing to echarts.js will not display the chart, and the dom will also display。
<head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="main" style="height:600px; width:600px;background-color: aqua;"></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
i am showing a table of picture in the page
var oTemp = new sap.m.ColumnListItem({
vAlign: "Middle",
cells: [
new sap.m.VBox({
items: [
new sap.m.Image({
src: {
path: "myModel>ImageLink",
},
densityAware:false,
decorative: false,
error: function(oEvent) {
this.setSrc(oEvent.getSource().getProperty("src"));
}
})
]
})
]
});
otable.bindItems({
path: "myModel>/Images",
template: oTemp
});
znd in xml
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text"/>
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
and it always enter in the error function despite in the debugger the image is l but once i open the image elsewhere the images are loaded perfectly
Will this help? http://jsbin.com/xusikeh/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<style type="text/css">
.sapMObjLTitle {
cursor: pointer;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text" />
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
</mvc:View>
</script>
<script>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/ColumnListItem',
'sap/m/VBox',
'sap/m/Image'
], function(jQuery, Controller, JSONModel, ColumnListItem, VBox, Image) {
return Controller.extend("myView.Template", {
onInit: function(oEvent) {
var oView = this.getView();
var oTable = oView.byId("imageTable");
oTable.bindItems({
path: "myModel>/Images",
template: new ColumnListItem({
vAlign: "Middle",
cells: new sap.m.VBox({
items: new Image({
src: '{myModel>ImageLink}',
densityAware:false,
decorative: false
})
})
})
});
oView.setModel(new JSONModel({
Images: [{
ImageLink: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
}]
}), "myModel");
}
});
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
I have tried to reproduce the Using Twitter Typeahead example from http://sliptree.github.io/bootstrap-tokenfield/. I have made only a minimal modifications on the original code.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/theme.css"></link>
</head>
<body>
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />
<script>
var engine = new Bloodhound({
local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
</script>
</body>
</html>
My problem is that the styling of auto completion and type ahead is missing. (I have a version with bower packages but it results the same.)
I have considered the
Twitter Typeahead comes with no default styling. Make sure to include tokenfield-typeahead.css on your page.
sentence in the documentation but the mentioned css file has included.
What should I correct for proper auto completion and type ahead styling?
The exact problem was with the included typeahead.js version. It works with 0.10.1, but not with 0.11.1. Downgrading to 0.10.1 fixes the problem.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<script type="text/javascript">
$(function () {
var engine = new Bloodhound({
local: [{
value: 'red'
}, {
value: 'blue'
}, {
value: 'green'
}, {
value: 'yellow'
}, {
value: 'violet'
}, {
value: 'brown'
}, {
value: 'purple'
}, {
value: 'black'
}, {
value: 'white'
}],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, {
source: engine.ttAdapter()
}]
});
});
</script>
</body>
</html>
I need to open the data from a .phtml file (gallery.phtml) in a modal popup in Magento2. This is the code used to include modal scripts:
<div>
Click Me
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
content: 'gallery.phtml',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
The gallery.phtml file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="popup-mpdal">
<h1> Hi I'm here.... </h1>
</div>
</body>
</html>
But the popup is not coming.
I got the answer:
<div>
Click Me
</div>
<div id="popup-mpdal" >
<?php include ($block->getTemplateFile('Vendor_Module::gallery.phtml')) ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
I have used this in html
<button type="button" class="action" data-trigger="trigger">
<span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': 'Popup title',
'trigger': '[data-trigger=trigger]',
'responsive': true,
'buttons': [{
text: 'Submit',
class: 'action'
}]
}}">
<div class="content">
Popup Content
</div>
</div>
I am building my first hybrid app with Ionic, and there is something I do not understand.
What is the use of ion-nav-view.
I explain: I have an app with "nav-tabs". Here is the code of a nav-tab:
<ion-tab title="Contacts" icon="icon-users" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
Everything is OK here.
So now, my list of contacts is a list which goes like this:
<ion-item href="#/tab/contacts/{{contact.id}}" ng-repeat="contact in contacts | orderBy:'name'">
{{contact.name}}
</ion-item>
Here is my problem: I have configured a route for '/tab/contacts/:id', and a view. The problem is: where should I put the equivalent of the "ion-nav-view" directive, so that my view is actually shown when I click?
Thank you!
I think the best answer is a working example similar to what you want to do.
However <ion-nav-view> must be in your index.html and it is where the route/state manager will put the templates of your views. The templates have another directive, <ion-view>, which wraps all other directives and content of the view.
Check the snippet below:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'views/tabs.html'
})
.state('tabs.contacts', {
url: '/contacts',
views: {
'tab-contacts': {
templateUrl: 'views/contacts.html',
controller: 'contactsCtrl',
resolve: {
allcontacts: function(Contacts) {
console.log("resolve allcontacts");
return Contacts.all();
}
}
}
}
})
.state('tabs.detail', {
url: '/detail/:id',
views: {
'tab-detail': {
templateUrl: 'views/detail.html',
controller: 'detailCtrl',
resolve: {
contact: function($stateParams, Contacts) {
return Contacts.get($stateParams.id);
}
}
}
}
});
$urlRouterProvider.otherwise("/tab/contacts");
})
.controller('contactsCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, $compile, $http, allcontacts) {
console.log("contactsCtrl");
$scope.contacts = allcontacts;
})
.controller('detailCtrl', function($scope, contact, $ionicHistory) {
$scope.contact = contact;
console.log("detailCtrl", contact);
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
})
.factory('Gravatar', function() {
return {
getUrl: function(s){
return "https://secure.gravatar.com/avatar/"+CryptoJS.MD5(""+Math.random())+"?d=identicon&s="+s;
}
}
})
.factory('Contacts', function($http, $q, $timeout, Gravatar) {
var contacts = [];
return {
all: function(){
var dfd = $q.defer();
//$http.get('../data/contacts.json').then(function(response){
$timeout(function() {
//contacts = response.data;
contacts = [{
id: 1,
name: "William",
surname: "Hayes",
fullname: "Grace Beatty",
image: Gravatar.getUrl(128)
}, {
id: 2,
name: "James",
surname: "Jennings",
fullname: "Hilda Gross",
image: Gravatar.getUrl(128)
}, {
id: 3,
name: "Judith",
surname: "Silverman",
fullname: "Bruce Kern",
image: Gravatar.getUrl(128)
}, {
id: 4,
name: "Greg",
surname: "Fitzpatrick",
fullname: "Heather Bowers",
image: Gravatar.getUrl(128)
}, {
id: 5,
name: "Teresa",
surname: "McLean",
fullname: "Leon Baker",
image: Gravatar.getUrl(128)
}, {
id: 6,
name: "Emily",
surname: "Lassiter",
fullname: "Virginia Pittman",
image: Gravatar.getUrl(128)
}, {
id: 7,
name: "Don",
surname: "Sinclair",
fullname: "Ashley Richards",
image: Gravatar.getUrl(128)
}, {
id: 8,
name: "Hazel",
surname: "Livingston",
fullname: "Gloria O",
image: Gravatar.getUrl(128)
}, {
id: 9,
name: "Regina",
surname: "Braun",
fullname: "Monica Casey",
image: Gravatar.getUrl(128)
}, {
id: 10,
name: "Leroy",
surname: "Pritchard",
fullname: "Gretchen Sharpe",
image: Gravatar.getUrl(128)
}];
//console.log(contacts);
dfd.resolve(contacts);
console.log("contacts.all");
});
return dfd.promise;
},
get: function(id) {
for (var i = 0; i < contacts.length; i++) {
if (contacts[i].id == id) {
return contacts[i];
}
}
return null;
}
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic detail view</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="views/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Contacts" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact detail" icon-off="ion-ios-person-outline" icon-on="ion-ios-person href="#/tab/detail">
<ion-nav-view name="tab-detail"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="views/contacts.html" type="text/ng-template">
<ion-view title="Contacts">
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="contact in contacts" ui-sref="tabs.detail({ id: contact.id })">
<img ng-src="{{ contact.image }}" />
<h2>{{ contact.name }}</h2>
<p>{{ contact.fullname }}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="views/detail.html" type="text/ng-template">
<ion-view title="Contact detail">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="myGoBack()" >
<i class="icon ion-ios-arrow-back"></i>
Back</button>
</ion-nav-buttons>
<ion-content>
<ion-item class="list-item">
<img ng-src="{{ contact.image }}" alt="{{ contact.name }}" />
<div class="list-details">
<p class="sub-heading"><b>Name:</b> {{ contact.name }}</p>
<p><b>Surname:</b> {{ contact.surname }}</p>
<p><b>Fullname:</b> {{ contact.fullname }}</p>
</div>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>