I am new to mustache. Have an object like
object = [{
name: 'A',
fields: { type: "string" }
},
{
name: 'B',
fields: { type: "boolean", default: false }
}]
I am passing that object to mustache template and I want generated code where default values are also shown.
Code:
{{#object}}
var {{name}}: {{#fields}} {{type}} {{^default}} = {{default}} {{/default}}{{/fields}}
{{/object}}
But I am not able to get the expected output from above code.
Expected Output:
var A: string
var B: boolean = false
If default were the string "false" it would (almost) work. You've currently got the equivalent to:
default = false
if (!default) {
" = " + default
}
… but you need:
default = "false"
if (default) {
" = " + default
}
So this would do it for you:
object = [{
name: 'A',
fields: { type: "string" }
},
{
name: 'B',
fields: { type: "boolean", default: "false" }
}]
… and change the {{^default}} block to {{#default}}:
{{#object}}
var {{name}}: {{#fields}} {{type}} {{#default}} = {{default}} {{/default}}{{/fields}}
{{/object}}
this work for me:
object : [
{
name: 'A',
fields: { type: "string" }
},
{
name: 'B',
fields: { type: "boolean", default: "false"}
}
]
with
{{#object}}
var {{name}}: {{#fields}} {{type}} {{#default}} = {{default}} {{/default}}{{^default}}{{/default}}{{/fields}}
{{/object}}
if the false cannot change to "false" and you want a result like you show above,you may try:
object : [
{
name: 'A',
fields: { type: "string", default: true}
},
{
name: 'B',
fields: { type: "boolean", default: false}
}
]
with
{{#object}}
var {{name}}: {{#fields}} {{type}} {{#default}}{{/default}}{{^default}}= false{{/default}}{{/fields}}
{{/object}}
Related
Im implementing a mongodb search.
The search performs a find on field values:
[{
value: "my.string.here"
}, {
value: "my other here"
}{
...
}]
When i enter "my" both entries are found. What have my query to look like to ignore the dots on the first entry? So when i enter "my string" the first element gets returned?
Actually it works only when i enter "my.string" which is not nice.
let limit = Number(req.query.limit || 100);
let skip = Number(req.query.skip || 0);
collection.find({
$or: [{
value: new RegExp(req.body.search, "gi")
}, {
tags: {
$in: req.body.search.split(",").map((val) => {
return new RegExp(val, "gi")
})
}
}]
}).skip(skip).limit(limit).toArray((err, result) => {
if (err) {
res.status(500).json(err);
} else {
res.status(200).json(result);
}
});
EDIT:
A solution could look like this:
let query = {
$or: [{
name: new RegExp(req.body.search, "gi")
}, {
tags: {
$in: req.body.search.split(",").map((val) => {
return new RegExp(val, "gi")
})
}
}, {
name: new RegExp(req.body.search.split(' ').join('.'), "gi")
}, {
name: new RegExp(req.body.search.split(' ').join('_'), "gi")
}, {
name: new RegExp(req.body.search.split(' ').join('-'), "gi")
}]
};
But i find it ugly and not elegant. Is there a better way to do this ?
I want change the placeholder in a template dynamically over the input of a textbox but it not work after change the value. Initial it work perfect.
Demo
https://jsfiddle.net/he4gx40g/
Update: Working example thanks #Roy J
https://jsfiddle.net/z3gbk0L2/
Example of the component (without the textbox logic)
<customValueComponent :item="config" :value="'ConfigValue1'" />
Code of the customValue component
customValueComponent: {
props: {
item: {
type: Object,
required: true
},
value: {
type: String,
required: true
}
},
watch: {
value: function (newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
this.$options.template = '<div>{{ item.' + this.value + '}}</div>';
}
},
created: function () {
this.$options.template = '<div>{{ item.' + this.value + '}}</div>';
},
template: ''
}
Object
var config =
{
ConfigValue1: "Titanium",
ConfigValue2: "Gold",
ConfigValue3: "Silver",
ConfigValue4: "Bronze",
ConfigValue5: "Copper",
...
};
$options is read-only. This is not how you change values in a template. Vue updates values as they change. Your component definition should be
Vue.component('customvalue-component', {
props: {
item: {
type: Object,
required: true
},
value: {
type: String,
required: true,
}
},
template: '<div>{{value}}</div>'
});
And your binding on the component should be
<customvalue-component :item="config" :value="config[value1]" />
a Vue newbie here. I am constructing a navbar-brand element as part of my navbar.
<template>
<!--Navbar-->
<navbar position="top" className="red">
<!-- Navbar brand -->
<navbar-brand></navbar-brand>
...
I would like it to display its child - a string passed in between the tags, if present AND a picture, if the prop.src is not empty. How do I do that - how do I condition the render function? The code is here:
import classNames from 'classnames';
export const props = {
tag: {
type: String,
default: "a"
},
src: {
type: String,
required: true
},
alt: {
type: String,
default: 'brand logo'
},
href: {
type: String,
default: '#'
},
className: {
type: String
}
};
export default {
functional: true,
props,
render(h, { props, data, children }) {
const dataObj = {
class: classNames(
'navbar-brand',
props.className ? props.className : ''
),
attrs: {
href: 'props.href'
}
};
const img = [
h('img', {
class: [],
attrs: {
src: props.src,
alt: props.alt
}
})
];
const
return h(props.tag, dataObj, img);
}
};
PLS HALP
Yours, Paco
I have a component:
App.MyChildComponent = Ember.Component.extend({
addTooltips: Ember.on('didInsertElement', function() {
var me = this;
var metrics = this.get('option.metrics');
metrics.forEach(function(e, i) {
me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true);
});
});
})
Which is generated inside an each loop by a different component:
App.MyParentComponent = Ember.Component.extend({
...
})
And the template of MyParentComponent is:
{{#each option in options}}
{{my-child option=option}}
{{/each}}
All this, is called by a view with a template like this:
{{my-parent options=options}}
options is defined in the model of the view with:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
{ name: 'a' },
{ name: 'b' },
{ name: 'c' }
]) },
{ metrics: Ember.A([
{ name: 'd' },
{ name: 'e' },
{ name: 'f' }
]) },
{ metrics: Ember.A([
{ name: 'g' },
{ name: 'h' },
{ name: 'i' }
]) }
]),
});
When I run me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true); I get:
Uncaught TypeError: me.get(...).objectAt(...).set is not a function
What am I doing wrong?
Vanilla JavaScript objects don't have set methods. Use Ember.Objects instead:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
Ember.Object.create({ name: 'a' }),
// ...
]) }
]),
});
Demo.
I'm trying to have a group of 3 radio buttons (each button in different column but the same row) in my Kendo grid but without success. I looked at the Kendo RowTemplate doc, but it's not directing me to any solution.
it works fine with checkboxes, but when i change the template to "radio" type, it changes to checkbox the second I click the edit button. any thoughts?
below is my kendoGrid properties, I put ** next to the 'template' line in the field property.
div.kendoGrid({
dataSource:
{ error: function (e) {
alert("An error occured: "+ e.xhr.responseText);
this.cancelChanges();
},
type:"json",
transport: {
read: {
url: "/users/read",
cache: false,
dataType: "json"
},
update: {
url: function(user){
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem(grid.select());
var roleIs;
if (user.Admin) {
roleIs="admin"
}
else if (user.Manager) {
roleIs="manager"
}
else if (user.User) {
roleIs="user"
};
return "users/update/"+model.id+"/"+roleIs+"/"+user.name
},
type: "PUT"
},
destroy: {
url: function(user){
return "/users/destroy/"+user.id+"/"+user.name
},
type: "DELETE"
},
create: {
url: function(user){
var roleIs;
if (user.Admin) {
roleIs="admin"
}
else if (user.Manager) {
roleIs="manager"
}
else if (user.User) {
roleIs="user"
};
return "users/create/"+user.login+"/"+user.name+"/"+roleIs+"/"
},
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model:
{ id: "id",
fields: {
id:{ type: "number",editable: false},
role:{ type: "string"},
login: { type: "string",editable: false},
name:{type: "string",editable: false},
Admin: { type: "boolean"},
Manager: { type: "boolean"},
User: { type: "boolean"}
}
}
},
pageSize: 30,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
selectable: "row",
navigatable: true,
pageable: true,
height: 400,
columns: [//{field: "id"},
{
field: "name",
title:"User Name",
filterable: true,
nullable: false,
editable: false
},{
field: "Admin",
**template: '<input type="checkbox" #= Admin ? "checked=checked" : "" # disabled="disabled"></input>'**,
width: 75
},{
field: "Manager",
**template: '<input type="checkbox" #= Manager ? "checked=checked" : "" # disabled="disabled"></input>'**,
width: 75
},{
field: "User",
**template: '<input type="checkbox" #= User ? "checked=checked" : "" # disabled="disabled"></input>',**
width: 75
},{
command: ["edit", "destroy"], title: "", width: "195px"
}],
editable:{mode: "inline"}
});
}
}
}
The formatting for edition is controlled by columns.editor
You need to write an editor function that defines the input as a radio button.