I'm writing a small OpenUI5 application. I would like to attach a model (list with key/text values) to a sap.m.Select element (drop-down box).
However, regardless of whether I use static data for the model or fetch the data through ajax, the select element remains empty, no drop-down is displayed. I thought I had followed the examples/tutorials but I can't see what the problem is.
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q Ui5 POC</title>
<script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:de/xx/qpoc/index"
data-sap-ui-resourceroots='{ "de.xx.qpoc": "./" }'
></script>
</head>
<body id="content" class="sapUiBody"></body>
</html>
index.js:
sap.ui.define([
"sap/ui/core/mvc/XMLView",
], function (XMLView) {
"use strict";
XMLView.create({
id: "qpocMainView",
viewName: "de.xx.qpoc.view.App",
}).then(function(oView) {
oView.placeAt("content");
});
});
App.view.xml:
<mvc:View controllerName="de.xx.qpoc.controller.App"
xmlns="sap.m"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<layout:VerticalLayout>
<Select
enabled="true"
editable="false"
forceSelection="false"
items="{
path: '/clientList',
sorter: { path: 'text' }
}">
<core:Item key="{key}" text="{text}" />
</Select>
</layout:VerticalLayout>
</mvc:View>
App.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("de.xx.qpoc.controller.App", {
onInit: function() {
var viewData = {
"clientList": [
{ key: 'key1', text: 'text1'},
{ key: 'key2', text: 'text2'},
]
};
var oModel = new JSONModel(viewData);
this.getView ().setModel(oModel);
}
});
});
I have removed all non-relevant UI elements and application logic. My understanding is that I do the binding in the onInit method of the controller. And that I can reference keys of the JSON structure I'm passing to the JSONModel constructor in the UI element (/clientList).
The generated UI looks like this:
Remove those two lines in your XML view or set them to true (default value):
editable="false" → makes the control non-interactive
forceSelection="false" → none of the options will be selected preliminarily
You do have data bound. It's just the settings that prevented them from displaying.
Related
In Vue.js 2 I would like to convert a string into a function call so that it can be set as an event handler.
I believe this would be very practical, specially when dynamically creating lots of elements (e.g. buttons) based on a list of objects.
new Vue({
el: "#app",
data: {
myArray: [
{ value: 1, fn: "firstMethod" },
{ value: 2, fn: "secondMethod" },
],
},
methods: {
firstMethod() {
console.log("'firstMethod' was executed.");
},
secondMethod() {
console.log("'secondMethod' was executed.");
},
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<template v-for="elem in myArray">
<button #click="elem.fn"> <!-- Here is where I am stucked. -->
<!-- <button> -->
{{elem.value}}
</button>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>
My first attempt at doing this was setting the fn properties in myArray as sort of pointers to the corresponding functions with this (e.g. fn: this.firstMethod). The problem is, I believe, that at the time of the definition, these functions are still unkown, as I get: [Vue warn]: Invalid handler for event "click": got undefined.
Is what I am trying to achieve even possible? Is there a downside with this strategy that I am overlooking?
Try to create one method, which will be working with all buttons
new Vue({
el: "#app",
data: {
myArray: [
{ value: 1, fn: "firstMethod" },
{ value: 2, fn: "secondMethod" },
],
},
methods: {
basicMethod(name) {
console.log(`'${name}' was executed.`);
if(name === 'firstMethod') {
//some logic, and so on for other methods if u need
}
},
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<template v-for="elem in myArray">
<button #click="basicMethod(elem.fn)"> <!-- Here is where I am stucked. -->
<!-- <button> -->
{{elem.value}}
</button>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>
You can use a generic method provided with the function name the call this[ fn ]();.
But for security reasons, you might want these custom methods to be in an object, not just on the main this, so other methods can't be called.
Also, you want to check if the method exists before calling it.
It would look something like this:
new Vue({
el: "#app",
data: {
myArray: [
{ value: 1, fn: "firstMethod" },
{ value: 2, fn: "secondMethod" },
{ value: 3, fn: "nonExistingMethod" }, // Won't throw an error
{ value: 4, fn: "someImportantSecureMethod" }, // Won't be called
],
customMethods: {
firstMethod: function() {
console.log("'firstMethod' was executed.");
},
secondMethod: function() {
console.log("'secondMethod' was executed.");
},
},
},
methods: {
callCustomMethod(fn) {
// Make sure it exists
if (typeof this.customMethods[fn] === "function") {
// Only methods inside the customMethods object are available
this.customMethods[fn]();
}
},
someImportantSecureMethod() {
console.log('The method may not be exposed to dynamic calling!');
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="elem in myArray">
<button #click="callCustomMethod(elem.fn)">
<!-- <button> -->
{{elem.value}}
</button>
</template>
</div>
As a side note:
You might also considering using custom events (see docs) for this. Using $emit('custom-event-name') as the v-on:click handler and have your custom methods as event listeners. (Makes it easy when you later might want to make the items into separate components.)
I have a single-page AngularJS app.
The index.html file looks like this:
<html ng-app="myApp" ng-controller="MyCtrl as myctrl">
<head>
<link rel="stylesheet" href="my-style-sheet.css">
<title>{{myctrl.title}}</title>
</head>
<body>
<div class="container">
<ol>
<li><a ui-sref="stateA">StateA</a></li>
<li><a ui-sref="stateB">StateB</a></li>
</ol>
<div ui-view></div>
</div>
<script src="my-app.js"></script>
</body>
</html>
As the user clicks on the StateA or StateB links, the page displays the content of those pages in place of <div ui-view></div>. Terrific.
As the user clicks around, the displayed content changes. I need the title of the page to change too. Currently it gets the title from the controller MyCtrl like this: <title>{{myctrl.title}}</title>. But when the user clicks those links, those states each have their own controllers. So I cannot use <title>{{myctrl.title}}</title>.
How can I update the title when various states the user clicks on have different controllers?
You can attach some data to each state of your routes, like a value that can be used to set the title of the page.
.state('test', {
url: '/test',
templateUrl: '/templates/test.html',
data: {
title: 'test title'
}
})
Then write a directive to read the title. You can check to see if the required data is available on the state you are going to, and attach the whole thing to $stateChangeSuccess event.
function dynamicTitle($rootScope, $timeout) {
return {
link: function(scope, el) {
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
var title = (toState.data && toState.data.title)
? toState.data.title
: 'Default title';
$timeout(function() {
el.text(title);
}, 0, false);
};);
}
};
}
angular.module('myApp').directive('dynamicTitle', dynamicTitle);
And attach it to your <title>
<title dynamic-title></title>
You can create an AngularJS factory, inject it, modify it by calling 'Title.setTitle()' from controllers
<html ng-app="app" ng-controller="Ctrl">
<head>
<title>{{ Title.title() }}</title>
app.factory('Title', function() {
var title = 'Hello';
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle }
};
});
I have 2 drop downs where selection of first drop down effects the data content of the second drop down.
The problem I have is this functionality is occurring only on first click instead it should happen every time.
Here is my jsFiddle with my working code and here is my code on jsbin(jsbin gives some error which I am unable to understand, help appreciated here too, #newbieTorture).
Thanks in Advance :)
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ArticleAdapter= DS.FixtureAdapter.extend({});
App.Article =DS.Model.extend({
title: DS.attr(),
body: DS.attr(),
shouldReloadAll:true,
comments: DS.hasMany('comment', {async : true})
//async tells compiler to load data from comment everytime this is rendered
});
App.Comment =DS.Model.extend({
text: DS.attr(),
shouldReloadAll:true,
article: DS.belongsTo('article', { async: true })
});
App.Article.FIXTURES=[
{
id:1,
title : 'Ember',
body:'Its a great technology but need lot of studying and practice',
comments:[1]
},{
id:2,
title : 'Angular',
body:'it takes less understanding but has more coding the ember',
comments:[2,3]
//this will be an aray coz it is has many relation
}
];
App.Comment.FIXTURES=[
{
id:1,
text : 'Yyyieee excited to learn ember',
aricle: 1
//its not an array coz it will be related to single object
},{
id:2,
text : 'I will start Angular once i have fininshed with ember',
article: 2
},{
id:3,
text : 'Angular can be interesting',
article: 2
}
];
App.CommentAdapter= DS.FixtureAdapter.extend();
App.IndexController = Ember.ArrayController.extend({
articleValue: null,
selected: null,
articleStore: Em.computed(function(){
console.log("data is : " + this.get('articleValue'));
console.log("data is : " + this.get('selected'));
return this.store.findAll("article");
}).property("selected"),
availableComment: Em.computed(function () {
var make = this.get('selected');
// the line below returns the id and not an object
console.log(make);
if (make === undefined || make === null)
return [];
return this.get('selected').get('comments');
}).property('articleValue'),
actions:{
callIndexController: function(){
var select= this.get("selected");
console.log("hi :" + select);
}
}
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [];
},
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
First drop down:
{{
view "select"
contentBinding=articleStore
optionLabelPath="content.title"
optionValuePath="content.id"
prompt="Pick a person:"
shouldReloadAll=true
selectionBinding=selected
valueBinding=articleValue
}}
<br>
<br>
Second drop down:
{{
view "select"
contentBinding=availableComment
optionLabelPath="content.text"
optionValuePath="content.id"
prompt="related task:"
shouldReloadAll=true
valueBinding=articleValue
}}
</script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.7/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.7/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.7/ember-data.js"></script>
<script src="js/amit_dropdown.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
[]I am trying to feed data (via an ajax call to a json file) to both a handlebars template and a leaflet map. With my current setup, the data reaches my handlebars template just fine, but doesn't render the coordinates data to the leaflet map. I suspect I am missing some basic piece of the ember.js puzzle. Would someone please advise me?
HTML/Handlebars Templates:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<title>sbk_3.0.8</title>
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{view App.MapView id="map" contentBinding="this"}}
<div id="blog">
<ul>
{{#each item in model}}
<li>{{item.headline}}</li>
{{/each}}
</ul>
</div>
</script>
<!--DEPENDENCIES-->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<!--MAP-->
<script src="js/libs/leaflet-src.js"></script>
<script src="js/libs/ember-leaflet.min.js"></script>
<!--APP-->
<script src="js/application.js"></script>
</body>
</html>
Ember:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function(){
return App.Item.all();
}
});
App.Item = Ember.Object.extend();
App.Item.reopenClass({
all: function() {
return $.getJSON("js/data/test_e.json").then(function(response) {
var items = [];
response.features.forEach( function (data) {
items.push( App.Item.create(data) );
});
return items;
});
}
});
App.MapView = Ember.View.extend({
didInsertElement: function () {
var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);
L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);
console.log(this.get('content'));
//HERE IS WHERE I GET STUCK. I CAN OUTPUT THE JSON TO THE CONSOLE...
//BUT HOW DO I DRILL DOWN, AND ULTIMATELY...
//HOW DO I SEND THE VALUE OF THE "CENTER" KEY TO LEAFLET, i.e. L.Marker([jsonObject.center]).addTo(map);
}
});
App.IndexController =
Ember.Controller.extend({});
JSON:
{
"features": [
{
"headline": "Docker, the Linux container runtime: now open-source",
"center" : [40.685259, -73.977664]
},
{
"headline": "What's Actually Wrong with Yahoo's Purchase of Summly",
"center" : [40.685259, -73.977664]
}
]
}
This is the same answer as the other question,
The view is backed by a controller, so you would do this.get('controller') to get the controller which is backed by your collection which if you wanted to get the collection (which isn't necessary since you can iterate the controller) you could do this.get('controller.model').
var controller = this.get('controller');
controller.forEach(function(item){
console.log(item.get('title'));
});
http://emberjs.jsbin.com/OxIDiVU/373/edit
I am using jQplot and JavaScript. I want to generate piechart from backing bean values in jQplot instead of static array.
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<a4j:loadStyle src="../../resources/chart/css/jquery.jqplot.css"/>
<a4j:loadScript src="../../resources/chart/jqplot-javascript/jquery-1.3.2.min.js"/>
<a4j:loadScript src="../../resources/chart/jqplot-javascript/jquery.jqplot.min.js"/>
<a4j:loadScript src="../../resources/chart/jqplot-javascript/jqplot.pieRenderer.min.js"/>
<script type="text/javascript">
var jsonPieObj = {
"pageHits": [
['JAN 2009', 120],
['Feb 2009',60],
['Mar 2009',22],
['Apr 2009',5],
['May 2009',60],
['June 2009',30],
['Jul 2009',22]]
};
$(function() {
$('#pieChartButton1').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [jsonPieObj.pageHits], CreatePieChartOptions1());
});
});
function CreatePieChartOptions1()
{
var optionsObj = {
title: 'Blog Statistics',
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10,
shadowOffset:1,
shadowAlpha:0.5,
shadowDepth:5
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
</head>
<body>
<h:form id="pieChartForm">
<rich:panel id="pieChartRichPanel">
<div>
<rich:panel>
<div id="chartDiv" style="width:600px; height:400px;" />
</rich:panel>
</div>
<div>
<input id="pieChartButton1" type="button" value="Pie Chart for Page Hits" />
</div>
</rich:panel>
</h:form>
</body>
</html>
</f:view>
My static content :
var jsonPieObj = {
"pageHits": [
['JAN 2009', 120],
['Feb 2009',60],
['Mar 2009',22],
['Apr 2009',5],
['May 2009',60],
['June 2009',30],
['Jul 2009',22]]
};
Help me about this.
Thanks in advance.
Create a model object representing a page hit.
public class PageHit {
private String period;
private Integer hits;
// Add/generate the usual c'tor/getter/setter boilerplate.
}
Populate it in your bean somehow as a List<PageHit>.
public class Bean {
private List<PageHit> pageHits;
public Bean() {
pageHits = loadItSomehow();
}
// Add/generate getters, etc.
}
Import JSTL core in your JSP (put jstl-1.2.jar in /WEB-INF/lib for the case you don't have it yet):
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
Use JSTL <c:forEach> tag to iterate over List<PageHit> and print it as if it's a JS array:
var jsonPieObj = {
"pageHits": [
<c:forEach items="#{bean.pageHits}" var="pageHit" varStatus="loop">
['${pageHit.period}', ${pageHit.hits}]${!loop.last ? ',' : ''}
</c:forEach>
]};
That's it.
Open page in webbrowser, rightclick and choose View Source to check if it has done its job properly. I.e., the generated JS code has no syntax errors.