I have a component that is entangling a livewire property.
<div x-data="{show: #entangle($attributes->wire('model'))}>
<form>
<input type="checkbox" wire:model.defer="story.show_name" name="show_name" />
</form>
</div>
I have a form within this component. If I update any field within the form it will send an update to the server bug it also modifies the wire:model. An example would be a checkbox. If I uncheck it then the component hides.
Example:
[
{
"type": "syncInput",
"payload": {
"name": "story.show_name",
"value": false
}
},
{
"type": "syncInput",
"payload": {
"name": "show",
"value": false
}
}
]
Any idea why this would suddenly be capturing all input/change events?
The problem was due to me adding all attributes to the component like so {{$attributes}}. This would add wire:model="show" to the element. Since my component wasn't an input field and just a div it would then accept all input events.
I replaced {{$attributes}} with {{$attributes->except('wire:model')}} to fix the problem.
Want to start animation while scrolling the image only once. How can I do that? "Is amp-position-observer" must need for animate on the scroll?
<div class="section4">
<amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
<amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
<amp-animation id="slideTransition2" layout="nodisplay">
<script type="application/json">{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"animations": [{
"selector": ".eboardimg",
"keyframes": [
{ "transform": "translateY(20%)" },
{ "transform": "translateY(0)" }
]
}]
}
</script>
</amp-animation>
<a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
LEARN MORE ABOUT THE CORE FOUR
</a>
</div>
</div>
You need to leave the first keyframe out of the animation - If you only have one keyframe, it will animate from whatever the current value is to the value of the only keyframe.
You can read more about amp animations at https://www.ampproject.org/docs/reference/components/amp-animation
So you'll want to do something like this:
In the style area:
.eboardimg{
transform:translateY(20%);
}
On the main page:
<div class="section4">
<amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
<amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
<amp-animation id="slideTransition2" layout="nodisplay">
<script type="application/json">{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"animations": [{
"selector": ".eboardimg",
"keyframes": [
{ "transform": "translateY(0%)" }
]
}]
}
</script>
</amp-animation>
<a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
LEARN MORE ABOUT THE CORE FOUR
</a>
</div>
</div>
Here's a working example: https://codepen.io/maxpelic/pen/mozRLQ
I have a list of item and ng-repeat display them in the page. Below is the simplified structure -
[
{
"id": "elem-1",
"position": {
"row": 1,
"column": 1
}
},
{
"id": "elem-2",
"position": {
"row": 2,
"column": 1
}
},
{
"id": "elem-3",
"position": {
"row": 2,
"column": 2
}
}
]
Now elem-1 should come in first row, while the second row should have elem-2 and elem-3, side-by-side. I have checked ng-repeat-start and also gone through the existing similar topics in Stack overflow but not sure how to do this. This is my HTML template
<div layout="row" ng-repeat="item in inputElemAll">
<div ng-if="if the current row has 1 column">
<md-input-container class="md-block">
<!-- Print the element-->
</md-input-container>
</div>
<div ng-if="if current row has more than 1 column">
<md-input-container class="md-block" flex="33">
<!-- Print the element-->
</md-input-container>
</div>
</div>
All I'm trying here is to add a flex attribute in case I have to show more columns in a single row. But the problem is, with every ng-repeat a new <div> with "row" layout is started and I'm stuck here. Not sure how to access multiple ng-repeat elements and also be on the same <div> simultaneously.
P.S. I use material layout, in case you are interested.
I am assuming that you wanna show your array like a table and maximum rows/columns are not greater than length of your array. You have to use two loops with ng-repeat, first one is for all rows and seconds one is for columns. also use 'orderBy' to sort. I mixed your json array and the result is as expected:
<div layout="row" ng-repeat="row in inputElemAll">
<div ng-repeat="item in inputElemAll | orderBy:'position.column'">
<div ng-if="$parent.$index==item.position.row-1">
<md-input-container class="md-block">
{{item.id}}
</md-input-container>
</div>
</div>
</div>
Check this jsFiddle working example:
http://jsfiddle.net/hd1by95r/47/
I have a dojox/mvc/Repeat area which is bound to an array of records.
Within the row of the Repeat there is a field (the id of the record) which should be a simple display Output if the record has already been saved to the database, but it should be a TextBox if the record is new (the user must enter the value).
How do I solve this elegantly? I am fairly new to Dojo and its MVC part is very under-documented.
The most MVC-ish solution I have found so far is as follows:
1)
I put a "hasBeenSaved" property into the model which will mark the server-side saved state of the record. This attribute will be bound to the view with a transformation since the "display" style attribute of the DIV will be bound to the hasBeenSaved model attribute (one is a boolean the other is a string: "block"/"none").
2)
Within the Row, I put a conditionally visible div around the id input field. This will be visible only when the record is new, so its display style attribute is bound with an appropriate transformer attached to the Dojo MVC binding.
The same is done for the id output field but the transformer is different on the binding since this will be displayed only when the record has already been saved.
The JSFiddle which I have used to prototype this solution: http://jsfiddle.net/asoltesz/6t4dj1w7/15/
require([
"dojo/_base/declare", "dojo/dom-style", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin",
'dojox/mvc/getStateful'
], function(
declare, domStyle, parser, ready,
_WidgetBase, _TemplatedMixin,
getStateful
){
// setting up the data model for MVC
model = {
items: [
{ id: 'id1',
hasBeenSaved: true
},
{ id: null,
hasBeenSaved: false
},
{ id: null,
hasBeenSaved: false
},
{ id: 'id3',
hasBeenSaved: true
}
]
};
model = getStateful(model);
/**
* This mixin makes it possible to set the "display" style property of
* the DOM node (of any widget) as a Widget property and thus bind it to an MVC model
* when needed.
*/
declare("_DisplayAttributeMixin", [], {
// parameters
display: "block",
_setDisplayAttr: function(/*String*/ display){
this._set("display", display);
domStyle.set(this.domNode, "display", display);
}
});
/** Transformer methods for converting hasBeenSaved to visible/hidden values */
transfSavedToHidden = {format: function(hasBeenSaved){
console.log("transfSavedToHidden: " + (hasBeenSaved ? "none" : "block"));
return hasBeenSaved ? "none" : "block";
}};
transfSavedToVisible = {format: function(hasBeenSaved){
console.log("transfSavedToHidden: " + (hasBeenSaved ? "block" : "none"));
return hasBeenSaved ? "block" : "none";
}};
ready(function(){
// Call the parser manually so it runs after our mixin is defined, and page has finished loading
parser.parse();
});
});
The HTML markup:
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div
data-dojo-type="dojox/mvc/Group"
data-dojo-props="target: model"
>
<div id="repeatId"
data-dojo-type="dojox/mvc/Repeat"
data-dojo-props="children: at('rel:', 'items')"
>
<div
data-dojo-type="dojox/mvc/Group"
data-dojo-props="target: at('rel:', ${this.index})"
>
<span>Record: ${this.index}</span>
<!-- This is displayed only when the record is new (not saved yet) -->
<div
data-dojo-type="dijit/_WidgetBase"
data-dojo-mixins="_DisplayAttributeMixin"
data-mvc-bindings="
display: at('rel:', 'hasBeenSaved')
.direction(at.from)
.transform(transfSavedToHidden)"
>
<label for="idInput${this.index}">id:</label>
<input
data-dojo-type="dijit/form/TextBox"
id="idInput${this.index}"
data-dojo-props="value: at('rel:', 'id')"
></input>
</div> <!-- end conditionally hidden div -->
<!-- This is displayed only when the record has already been saved -->
<div
data-dojo-type="dijit/_WidgetBase"
data-dojo-mixins="_DisplayAttributeMixin"
data-mvc-bindings="
display: at('rel:', 'hasBeenSaved')
.direction(at.from)
.transform(transfSavedToVisible)"
>
<label for="idInput${this.index}">id:</label>
<span
data-dojo-type="dojox/mvc/Output"
id="idOutput${this.index}"
data-dojo-props="value: at('rel:', 'id')"
></span>
</div> <!-- end conditionally hidden div -->
<hr/>
</div> <!-- end of row -->
</div> <!-- end of Repeat -->
</div> <!-- end of Group -->
A secondary, less complex solution:
Bind the "hasBeenSaved" property to a hidden text within the repeating div.
Put an onChange event on the hidden field which gets the index of the repeat as well.
The onChange event simply hides the field which is not appropriate in light of the hasBeenChanged property value for the record.
The fiddle is here: http://jsfiddle.net/asoltesz/8u9js6sz/5/
Code:
hasBeenSavedChanged = function(field, index) {
var divToHide
if (field.value == true) {
divToHide = "idInputDiv"
}
else {
divToHide = "idOutputDiv"
}
var div = document.getElementById(divToHide + index);
div.style.display = "none";
}
require([
"dojo/_base/declare", "dojo/dom-style", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin",
'dojox/mvc/getStateful'
], function(
declare, domStyle, parser, ready,
_WidgetBase, _TemplatedMixin,
getStateful
){
// setting up the data model for MVC
model = {
items: [
{ id: 'id1',
hasBeenSaved: true
},
{ id: null,
hasBeenSaved: false
},
{ id: null,
hasBeenSaved: false
},
{ id: 'id3',
hasBeenSaved: true
}
]
};
model = getStateful(model);
ready(function(){
// Call the parser manually so it runs after our mixin is defined, and page has finished loading
parser.parse();
});
});
HTML:
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div
data-dojo-type="dojox/mvc/Group"
data-dojo-props="target: model"
>
<span id="itemsCtl"
data-dojo-type="dojox/mvc/ListController"
data-dojo-props="model: model.items">
</span>
<div id="itemsRepeat"
data-dojo-type="dojox/mvc/Repeat"
data-dojo-props="children: at('rel:', 'items')"
>
<div
data-dojo-type="dojox/mvc/Group"
data-dojo-props="target: at('rel:', ${this.index})"
>
<span>Record: ${this.index}</span>
<input
id="hasBeenChanged${this.index}"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'hasBeenSaved')"
onChange="hasBeenSavedChanged(this, '${this.index}');"
type="hidden"
></input>
<!-- This is displayed only when the record is new (not saved yet) -->
<div id="idInputDiv${this.index}"
>
<label for="idInput${this.index}">id:</label>
<input
data-dojo-type="dijit/form/TextBox"
id="idInput${this.index}"
data-dojo-props="value: at('rel:', 'id')"
></input>
</div> <!-- end conditionally hidden div -->
<!-- This is displayed only when the record has already been saved -->
<div id="idOutputDiv${this.index}" >
<label for="idInput${this.index}">id:</label>
<span
data-dojo-type="dojox/mvc/Output"
id="idOutput${this.index}"
data-dojo-props="value: at('rel:', 'id')"
></span>
</div> <!-- end conditionally hidden div -->
<hr/>
</div> <!-- end of row -->
</div> <!-- end of Repeat -->
</div> <!-- end of Group -->
Mixin/transformer approach is something I had in mind, too. Two things I’d add there are out-of-the-box Dijit features, one is dijitDisplayNone class, another is attribute mapping feature.
Though it’s strange that the former is undocumented, the intent may have been for private usage within Dijit codebase.
Though it’s a bit hackish (and may be broken in future 1.x Dijit releases), overriding the Dijit code that’s responsible for attribute mapping will allow you to map a widget attribute to a CSS class that’s toggled.
Here’s a code sample that uses the above two:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/dijit.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 0"></script>
<script type="text/javascript">
require([
"dojo/_base/array",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/dom-class",
"dojo/parser",
"dojox/mvc/getStateful",
"dijit/form/TextBox"
], function(array, declare, lang, domClass, parser, getStateful){
declare("CssToggleMixin", null, {
// summary:
// Mixin class to support widget attributes with toggleClass type.
// toggleClass type allows boolean value of an attribute to reflect existence of a CSS class in a DOM node in the widget.
_attrToDom: function(/*String*/ attr, /*String*/ value, /*Object?*/ commands){
// summary:
// Handle widget attribute with toggleClass type.
// See dijit/_WidgetBase._attrToDom() for more details.
var callee = arguments.callee;
array.forEach((function(){ return lang.isArray(commands) ? commands.slice(0) : [commands]; })(arguments.length >= 3 ? commands : this.attributeMap[attr]), function(command){
command.type != "toggleClass" ?
this.inherited("_attrToDom", lang.mixin([attr, value, command], {callee: callee})) :
domClass.toggle(this[command.node || "domNode"], command.className || attr, value);
}, this);
}
});
flipConverter = {
format: function (value) {
return !value;
},
parse: function (value) {
return !value;
}
};
model = getStateful({
items: [
{
value: "Foo",
hasBeenSaved: true
},
{
hasBeenSaved: false
},
{
hasBeenSaved: false
},
{
value: "Bar",
hasBeenSaved: true
}
]
});
parser.parse();
})
</script>
</head>
<body>
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(model, 'items')">
<script type="dojox/mvc/InlineTemplate">
<div>
<span data-dojo-type="dijit/_WidgetBase"
data-dojo-mixins="CssToggleMixin"
data-dojo-props="value: at('rel:', 'value'),
noDisplay: at('rel:', 'hasBeenSaved').transform(flipConverter),
_setValueAttr: {node: 'domNode', type: 'innerText'},
_setNoDisplayAttr: {type: 'toggleClass', className: 'dijitDisplayNone'}"></span>
<span data-dojo-type="dijit/form/TextBox"
data-dojo-mixins="CssToggleMixin"
data-dojo-props="value: at('rel:', 'value'),
noDisplay: at('rel:', 'hasBeenSaved'),
_setNoDisplayAttr: {type: 'toggleClass', className: 'dijitDisplayNone'}"></span>
</div>
</script>
</div>
</body>
</html>
Hope it’ll shed some light.
Best, Akira
I have added columns in the kendo ui grid dynamically.
I have a column named 'Formatted' with the data displayed in the below format.
<div class="class1"> <div>This is <strong>bold </strong>text.</div> <div> </div> <div>This is <em>italics</em> text.</div> <div> </div> <div>This is a hyperlink.</div> <div> </div> <div>Bulleted list:</div> <ul> <li>Bullet #1</li> <li>Bullet #2</li> <li>Bullet #3</li></ul></div>
I want the 'Formatted' column to display the data as below.
This is bold text.
This is italics text.
This is a hyperlink.
Bulleted list:
Bullet #1
Bullet #2
Bullet #3
How can I do this.
Please anyone can help me on this.
You should define a column template.
Example:
<script id="ob-template" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
</ul>
</div>
</script>
and then, when you define the columns use it:
$("#grid").kendoGrid({
dataSource: ...,
columns: [
{ field: "...", title: "...", template: $("#ob-template").html()}
]
});
You can use template property: template: "#=rawHtmlDataVariable#" like this
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "#=rawHtmlDataVariable#"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template