I'm dealing with an application that contains code along these lines:
<v-col
v-for="(publication, pubIndex) in publications"
:key="'selected_' + pubIndex"
class="col-3"
>
<v-card
height="100%"
class="flexCard"
>
<v-card-title
class="white--text"
:class="{'grey': !publication.isCitation, 'green': publication.isCitation}"
>
<!-- card content -->
<v-switch
v-model="publication.isCitation"
color="green"
label="Use as citation?"
/>
...
If, when the page is mounted, the objects in publications do not contain an isCitation parameter then this switch correctly binds to it; toggling the switch adds the parameter as "true" and toggling it again sets it to false. The card changes colour as it should.
But, if the page is mounted with isCitation already present the card is rendered in the correct colour for whether it's true or false, and the switch is in the correct position, but toggling the switch does not change anything.
Can anyone suggest what might be going wrong here?
The answer turned out to be the following:
Removing v-model from the v-switch and replacing with this:
:input-value="publication.isCitation"
#change="toggleCitation(pubIndex)"
Adding this function in methods:
toggleCitation(index) {
let pub = this.publications[index];
pub.isCitation = !pub.isCitation;
this.$set(this.publications, index, pub);
},
Related
I've got a page with a list view:
<ListView items="{{ tasteList }}" visibility="{{tasteList.length> 0 ? 'visible' : 'collapse'}}">
I'm trying to check the length of tasteList and toggling the visibility so the list view is only rendered if there are items in it, and I'm rendering a different layout in that case:
<StackLayout visibility="{{tasteList.length = 0 ? 'visible' : 'collapse'}}">
In my test case, there are 3 items returned. With the above code, on initial page load the list is not visible and my StackLayout appears. if I navigate away from the page and come back, the listview IS displayed (as long as I don't empty the viewmodel0.
If I remove the condition and just make the listview visible all the time, the page loads the listview and the three items as expected.
It seems that the condition is checked before the view model is actual loaded and not updated subsequently. When I put <Label text="{{ tasteList.length }}" /> at the top of the page
I see "0" for about 1 second and then it switches to "3" but the visibility isn't toggled on my ListView/StackLayout.
What am I doing wrong?
You are suppose to use == or === on the expression (conditional statement for visibility) and more importantly you should mention the attribute before the expression, the one that should trigger change upon update.
Example
<StackLayout visibility="{{ tasteList.length, tasteList.length === 0 ? 'visible' : 'collapse'}}">
From docs, Using expressions for bindings
Trying to use kendo-mobile-switch inside kendowWindow. The switch is displayed fine, but doesn't toggle. On the same page with the same included kendo css/js the same mobile switch toggles just fine if used on the page itself, not inside the kendoWindow.
I've looked in the page source and it looks like when switch does toggle, the following transformation is added:
<span class="km-switch-handle" style="transform: translateX(27px) translateY(0px);">
The same switch in the "non-toggled" state looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
However, if I look at the source of the toggle inside kendoWindow, in both toggled and non-toggled states it looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
I've also dogged through kendo.all.js and it looks like when switch is toggled, it computes the offset it needs to transform itself based on the position. My guess is when displayed in the kendoWindow, get position logic fails/doesn't work properly:
_position: function (position) {
var that = this;
that.position = position;
that.handle.css(TRANSFORMSTYLE, 'translatex(' + position + 'px)');
if (that._animateBackground) {
that.background.css(MARGINLEFT, that.origin + position);
}
},
Any idea what the problem might be?
Guess I'm going to answer my own question:
Found a very similar issue when mobile switch is used inside the list view:
http://www.telerik.com/forums/angular-kendo-mobile-switch-in-list-view-template
The switch in this example behaves exactly the same as it does in kendoWindow. Judging by the title of the issue, the problem was with "angular compilation is performed before the items are inserted into the DOM". This would explain why position is not calculated in the case with kendoWindow.
I'm using uib-datepicker-popup fairly heavily in my application. It has worked perfectly until this specific instance.
I am using it exactly the same as I have in every other instance of my application, but it only half works.
The "Today", "Clear" and "Done" buttons in the bottom bar work as expected (hitting "today" puts the date in the input and hides the calendar, "clear" clears the input and hides the calendar, "done" hides the calendar).
However, when I select any date/day on the calendar it highlights it, but the date does not populate in the input and the calendar remains open.
Here's my html:
<input type="text" class="form-control" name="convert_date" uib-datepicker-popup="M/d/yyyy" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
Any ideas why the date buttons won't populate the input?
ngModelOptions was the culprit here. I had it set for the entire view in this area of my application as follows:
ng-model-options="{ updateOn: 'blur click', debounce: {'blur': 0, 'click': 0} }"
This prevented the day/date buttons from being able to fire their events and populate the input and hide the calendar.
I resolved my problem by adding another instance of ngModelOptions directly as an attribute to my uib-datepicker-popup element like so:
<input ng-model-options="{ updateOn: 'default' }" name="convert_date" uib-datepicker-popup="M/d/yyyy" type="text" class="form-control" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
This reset the model behavior to the default settings, so that the datepicker could function properly again.
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
I am getting a w3c validation error here as
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
This is my source code
<ul class="link">
<li><span>1<div class="clr"> </div><label>Vul Postcode in </label></span></li>
<li><span>2<div class="clr"> </div><label>Restaurants </label></span></li>
<li><span>3<div class="clr"> </div><label>Menukaart</label></span></li>
<li><span>4<div class="clr"> </div><label>Afrekenen</label></span></li>
</ul>
Please help me to find out the issue,
Thanks
Pallavi
You have a block element (div) inside of an inline element (span). This is not allowed.
Solution 1: Change span to div:
<div>2<div class="clr"> </div><span class="label">Restaurants </span></div>
(You have to use HTML5 (<!DOCTYPE html>), otherwise block elements wouldn’t be allowed inside of a elements.)
Solution 2: Change div to span:
<span>2<span class="clr"> </span><span class="label">Restaurants </span></span>
Note that you can’t have label inside of an a element (I changed the label to span here). Use the label element only when you have a form.