I have two vue properties firstName and lastName. Let's say the value of these properties are Tim and Smith. When I display them as a complete name, I display these properties and include a space between them if they both contain values. However, Vue omits the space in the output and displays TimSmith. But if I change to code to output a comma space if both properties have values then it properly ouputs Tim, Smith. Feels like a bug. Can anyone explain how to achieve my goal with Vue of only including a space between the two properties if they both contain values and explain why I'm seeing what I am?
<html>
<head>
</head>
<body>
<div id="appTemplate">
{{firstName}}<template v-if="firstName!='' && lastName!=''"> </template>{{lastName}}<br />
{{firstName}}<span v-if="firstName!='' && lastName!=''"> </span>{{lastName}}<br />
{{firstName}}<template v-if="firstName!='' && lastName!=''">, </template>{{lastName}}<br />
{{firstName}} {{lastName}}<br />
</div>
<script src="https://unpkg.com/vue#2.2.5/dist/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#appTemplate',
data: {
firstName: "Tim",
lastName: "Smith"
}
});
</script>
</body>
</html>
The above code produces the output below. Why isn't there a space between Tim and Smith in the first two lines?
You should use symbol as space.
Also as a one of ways to get the same result
{{(firstName + ' ' + lastName).trim()}}
Related
I've got a table in my page wrapped up in Datatables. The data is being grabbed from a php file perfectly and there is no problem with the code in that part. However, I've got a problem with buttons inside the table.
The followings are the columns inside my Datatables table:
columns: [
{"data": "id"},
{"data": "name"},
{data: null, render: function(data, type, row) {
return '<span class="fa fa-pen"></span>'
}},
],
As you can see, I have defined three columns, the first of which is 'id', the second 'name' and the third a column including a button. My problem is related to this button. In fact, I want to call a function, for instance, edit(), whenever this button is clicked. The edit() function gets the value of 'name' (second column) as its parameter. Now the question is this: how can I pass the value of the second column to the function edit() when the button is clicked;
as a result, the onClick call of the third column shall be something like this: onclick="edit(name.val)"... I have left this onClick="" empty, because I don't know how to do this.
Millions of thanks in advance.
After dealing with the problem for a couple of hours, I came to know that with a simple javascript concatenation, the problem could be solved.
Previously, the block was like the following:
<span class="fa fa-pen"></span>
and I had problems with onclick call where I could not pass a parameter for the functions.
To solve the problem, I changed the block a little bit and used concatentation, and voila, the problem was gone.
This should turn into
return '<span class="fa fa-times-circle"></span>'
Here is a working example. It uses the data function described on this page. The relevant part is this:
{ "data": function ( row, type, val, meta ) {
return "the data in column 1 is '" + row[0] + "'";
}
}
In the three-column table (below), the third column is populated based on data from the first column.
Here is the full sample - you should be able to adapt this technique to your situation:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animals</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="animals" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>Animal</th><th>Collective Noun</th><th>Customized Data</th></tr>
</thead>
<tbody>
<tr><td>antelopes</td><td>herd</td><td></td></tr>
<tr><td>elephants</td><td>herd</td><td></td></tr>
<tr><td>hounds</td><td>pack</td><td></td></tr>
<tr><td>kittens</td><td>kindle</td><td></td></tr>
<tr><td>lions</td><td>pride</td><td></td></tr>
<tr><td>ravens</td><td>unkindness</td><td></td></tr>
<tr><td>whales</td><td>pod</td><td></td></tr>
<tr><td>zebras</td><td>herd</td><td></td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#animals').DataTable({
"columns": [
null,
null,
{ "data": function ( row, type, val, meta ) {
//console.log(row);
//console.log(type);
//console.log(val);
//console.log(meta);
return "the data in column 1 is '" + row[0] + "'";
}
}
]
});
});
</script>
</body>
The (commented-out) console logging statements are there so you can take a closer look at how the function works, if you wish.
make use the edit method is placed outside jquery initiation in golobal level
function edit(){
//content
}
jQuery(document).ready(function() {
//data-tables script here
}
I'm building a simple book browsing app using the open Google Books API. The problem is that in the API response, there are quotes and unicode entities. Now, when rendering, Vue.js is converting the quotes to HTML entities, and while it's converting unicode back to text, it doesn't apply HTML tags where they should. Let me give you an example:
Pronunciation Guide for \u003cb\u003eElixir\u003c/b\u003e Aether: EE-ther Ananke: ah-NAN-key Agapi: ah-\u003cbr\u003e\nGAH-pee Apollyon: a-POL-ee-on Atropos: ah-TRO-poes Clothe: KL O-tho \u003cbr\u003e\nDaimon: DEE-mun Hematoi: HEM-a-toy Khalkotauroi: kal-koh-TOR-oy CHAPTER \u003cbr\u003e\n1 ALEX ...
The text above (from the raw API response) gets converted into this:
You can see that the <b> tags were left untouched. I can understand this because one decoding was definitely done (from Unicode to HTML), but how can I make it to actually interpret and apply the HTML?
Here's another example, where I'd like to convert a quote code to the actual quotation mark, but it doesn't happen:
Raw API response:
ABOUT THE AUTHOR Benedict Anderson is one of the world's leading authorities on South East Asian nationalism and particularly on Indonesia.
Rendering:
Here's the code I'm using in my component (rather simple):
<template>
<div class="book-listing">
<div class="book-image">
<img :src="book.volumeInfo.imageLinks.smallThumbnail">
</div>
<div class="book-title">
{{ book.volumeInfo.title }}
</div>
<div class="book-description">
{{ book.searchInfo.textSnippet }}
</div>
</div>
</template>
<script>
export default {
props: [ 'book' ]
}
</script>
Maybe you can use v-html
<div class="book-title" v-html="book.volumeInfo.title">
Btw - v-html sets the whole inner html content of element, if wonder if exists some simple way to use result as attribute:
// Amortisseur arri\ère >> Amortisseur arrière
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
Did anyone ever tried minified wijmo 5 angular js files?
I fails after concatenation, I tried putting all js files inside IIFE still it fails to execute.
Please let me know if any one has ever tried the same.
FYI: I do not have unminified files as wijmo provides it after buying licences.
Link to wijmo : http://wijmo.com/5/docs/static/references.html
You can also use CDN link for the same. Please refer to 'Deploying Wijmo from CDN' at the same link mentioned above. Here is the code snippet for using Wijmo 5 FlexGrid with AngularJS.
<html>
<head>
<link href="http://cdn.wijmo.com/5.20163.254/styles/wijmo.min.css" rel="stylesheet"/>
<script src="http://cdn.wijmo.com/5.20163.254/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20163.254/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20163.254/controls/wijmo.grid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20163.254/interop/angular/wijmo.angular.min.js"></script>
<script>
var app = angular.module('app', ['wj']);
// app controller provides data
app.controller('appCtrl', function($scope){
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 50; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
// add data array to scope
$scope.data = data;
});
</script>
</head>
<body>
<div ng-app="app" ng-controller="appCtrl" >
<wj-flex-grid items-source="data" style="height:200px;">
</wj-flex-grid>
</div>
</body>
</html>
Thanks,
Manish Kumar Gupta
I wanted to be able to change the type of charts made with dimple.js using variables.
I am able to do it using local variables, set up manually, thanks to this post: change chart type in dimple.js to automate chart production
However, when I am trying to go a step further and place all my variables in a configuration file, it does no longer work anymore. I'm pretty sure I'm missing something with the "objects", but can't figure what.
Sorry, it might be an obvious thing I'm missing, but I'm a data analyst, not a developer and quite a rookie concerning d3.js and dimple.js.
My code: (see below) http://plnkr.co/McEDMkovXaQpsn5z9mmV
I have put 2 html pages : "Manual" is where it works with local variables declared manually.
"Dynamic" is the same code except I've put the variables in a configuration file and I read the configuration file using D3.csv function (a line par chart). It does not work.
Thank you for your help!
Code : http://plnkr.co/McEDMkovXaQpsn5z9mmV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="script.js"</script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
var chartType1 = "bar";
var chartDimple1 = dimple.plot[chartType1];
var chartSerie1 = "Channel";
var chartGroup1 = ["Month", "Channel"];
var chartMeasure1 = "Unit Sales";
var filterField1 = "Owner";
var filterValues1 = ["Aperture", "LexCorp"];
var svg1 = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data.csv", function (data1) { //d3.tsv("data/example_data.tsv", function (data) {
var data1 = dimple.filterData(data1, filterField1, filterValues1) // dataFiltered = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"])
var myChart1 = new dimple.chart(svg1, data1);
myChart1.setBounds(60, 30, 510, 305)
var x1 = myChart1.addCategoryAxis("x", chartGroup1); // var x = myChart.addCategoryAxis("x", ["Channel" , "Month"]);
x1.addOrderRule("Date");
var y1 = myChart1.addMeasureAxis("y", chartMeasure1);
myChart1.addSeries(chartSerie1, chartDimple1); // myChart.addSeries("Channel", dimple.plot.bar);
myChart1.addLegend(60, 10, 510, 20, "right");
myChart1.draw();
});
</script>
</div>
<div id="chart2"></div>
<div id="chart3"></div>
<script type="text/javascript">
pageLayout(configFile);
</script>
</body>
</html>
I'm having a tough time getting the example working, lots of files doing lots of things. I think the basic problem is that when you import the dsv config file, your group still comes back as a string like "["Month", "Channel"]". When you pass this to chart.addCategoryAxis it's going to look at it like a string rather than an array. You should be able to do
chart.addCategoryAxis(JSON.parse(d.chartGroup));
and have it correctly set it as an array. This only works if you know it's going to be an array, if it may only be one string you would need to check beforehand to know if you need to parse it or not.
Also some of the code I don't think works on that site because it's still looking for the static dsv/csv files in a data/ directory that isn't there, but I think the string/array issue is probably the one holding you up.
I am not able to display Dojo Combobox as explained in this fiddle. I have added references of Dijit.js, Dojo.js, Ready.js and memory.js. My script gets executed as I verified by putting an alert but the Combobox simply doesn't show up. What am I missing?
Following is my html:
<div id="stateSelect"></div>
Following is my JS script
<script>
require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/ready"],function(Memory, ComboBox){
var ss = 'Abas Store, Accounts';
ss = ss.split(',');
var data = [];
dojo.forEach(ss, function(item, idx) {data.push({id: idx,name: item});});
var stateStore = new Memory({data: data});
var comboBox = new ComboBox({name: "select",value: "Select...",store: stateStore,searchAttr: "name"},"stateSelect");
});
</script>
Following JS references are added and each one of them is accessible:
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/dojo.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/ready.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/store/memory.js></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dijit/form/ComboBox.js"></script>
Edited to show snapshot after "Dimitri M" reply(referred from my comments):
I'm seeing several things here that are not right:
The first thing is that you only need to load the AMD loader (dojo.js), all other files are loaded automatically by it, so this means you can remove:
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/ready.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/store/memory.js></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dijit/form/ComboBox.js"></script>
The second thing I notice (also in the example you're referring to) is that it's missing the proper event to wait for the DOM to load. You should replace dojo/ready by dojo/domReady!. This will make sure that the callback is only loaded if the DOM is loaded.
If you don't wait for the DOM, then your script might not find the div #stateSelect, and then the grid won't load (I think this is your problem).
I also have a recommendation (not a bug), you should not use dojo.forEach() if you're using a new version of Dojo, that syntax is actually deprecated and should be replace by the dojo/_base/array module which has a similar forEach() function.
But what you need is not the forEach() function, but the map() function to map your array of Strings to an array of objects.
I updated the example you used with the recommendations I gave, which you can find here.