code:
<zk>
<vbox r="#ref(1)">
<label value="${empty r}" />
<label value="#load(empty r)" />
</vbox>
</zk>
returns:
true
false
${} not working with #ref()?
Short answer : no it doesn't.
First, if you want automatic updates of values use #load(...) because static expressions in ${...} are only evaluated once.
Second, bind annotations #init/#load are being computed later in the ZK Bind lifecycle than the static EL expressions.
So ZK first tries and evaluate your ${empty r}, at this time r is not defined so ${empty r} is null.
Then later in the lifecycle it'll handle the databinding annotations #.
Related
As we know v-model is two way binding. Which means it's combination of V-bind and maybe another attribute which I'm looking for and it updates the data. I have a input which it's value is sometimes custom and sometimes should be read from config based on another parameters.
What I need is an input with a v-bind:value/:value and another for update. I know I can do it with #change and a custom method But I'm looking for something easy, Bottom line is I want V-model without doing v-bind ! Thank You
EDIT: I did it with two input using v-if .
<input type="number" class="item-input" v-if="setting.keto_program=='custom'" id="protein_per_kilo" v-model="setting.keto_program_protein_density">
<input type="number" class="item-input" v-else disabled id="protein_per_kilo" :value="config.keto_programs[setting.keto_program].protein_density">
Anyway doing this using just one input feels better. Thanks
May be you can use computed hook.
computed:{
yourVariable(){
return someVariable/computation
}
}
you can use yourVariable inside your code that will act like v-model without doing v-bind.
yourVariable will be updated as soon as the variables of the return statement of this be changed or updated
Edited:
part of v-model for input tag
<input
v-bind:value="variable"
v-on:input="variable = $event.target.value"
>
or
<input
:value="variable"
#input="variable = $event.target.value"
>
found this via
Vue.js—Difference between v-model and v-bind
I want to dynamically set the input datetime step granularity using aurelia binding.
In my time.js:
timeStep = "1";
In my time.html:
The following works correctly:
<input type=datetime-local value="2017-01-01T00:00:00" step="1" value.bind="formParameters.timeFrom" >
${timeStep}
However when I try to set the step using my variable - it doesn't seem to work:
<input type=datetime-local value="2017-01-01T00:00:00" step="timeStep" value.bind="formParameters.timeFrom" >
${timeStep}
You can see I have lost the seconds granularity. When I inspect the element, it comes out as:
<input type="datetime-local" value="2017-01-01T00:00:00" step="timeStep" value.bind="formParameters.timeFrom" class="au-target" au-target-id="37">
Where timeStep should be "1".
To bind any HTML attribute to a property in your viewModel - you need to use .bind.
<input type=datetime-local value="2017-01-01T00:00:00" step.bind="timeStep" value.bind="formParameters.timeFrom">
Aurelia will assume anything in a .bind attribute is a property of your viewModel class and bind them accordingly. You can use .bind on any (as far as I know) HTML attribute.
I have created an HTML-only custom element to represent an input and all the DOM structure that does with it.
I have set up bindable properties on the template to supply values into the element. However, I don't see a way to specify that a bindable should be two-way.
the element:
<template bindable="label,name,placeholder,value">
<div class="form-group">
<label class="control-label col-sm-2" for.bind="name">${label}</label>
<div class="col-sm-7 col-md-6">
<input class="form-control" id.bind="name" placeholder.bind="placeholder" value.bind="value" />
</div>
</div>
</template>
I know I can specify two-way binding each time the element is used (e.g. <my-element value.bind="firstName & twoWay"></my-element>, but I want to set the default without having to create and maintain a separate class (i.e. I like html-only element for this case).
Is this possible?
I don't think that's possible in a simple way. I mean, you could figure out how to override the default behaviour somehow ([source], [source]), but it's likely that you would end up with several more classes to maintain.
Documentation is clear about that:
You can even have bindable properties on your HTML Only Custom Element. These properties default to one-way databinding, but you can't change the default, though you are still free to explicitly set the binding direction when you bind to the Custom Element.
In my opinion, using .two-way explicit binding is your simplest option here.
<my-element value.two-way="firstName"></my-element>
I want to be able to reset all text fields to their default values when a button is clicked.
What I've done so far is query for all text fields and bind a function I wrote called 'textChanged' to the change event as follows:
require(["dojo/on","dojo/query"], function(on,query){
query(".Text").on("change",textChanged);
});
The function is defined as follows:
function textChanged(newVal)
{
...
}
I found I can reset the value in the body of the function by doing the assignment:
newVal.target.value = newVal.target.defaultValue;
If this function is triggered by a change event.
What I want to do is if a button is clicked, then I want to execute the newVal.target.value = newVal.target.defaultValue and am having trouble getting the context correct.
I've tried preserving the 'this' variable when it is called as well as preserving the 'newVal' parameter. If I try setting the value outside of the the context, then the update doesn't preserve. I've tried setting the 'this' value to some other value (nt = this) and the newValue to another variable (nv = newValue) and then I want to execute:
nv.target.value = nv.target.defaultValue;
and although it clears the field on the form, when the form is submitted, its actual value is still the manually modified value. I noticed that the 'this' is different from when I textChanged is called from the change event verses when I call it directly in my button clicked context.
I tried calling it using 'hitch' to set the context of this to its value that it had from the change event, but that doesn't seem to set the correct context:
require(["dojo/on", "dojo/_base/lang"], function(on, lang) {
lang.hitch(nt, textChanged(nv));
});
To be precise - inside textChanged I display the value of 'this' using console.log(this);
When textChanged is invoked when the text changes from the UI, 'this' is:
Yet when it is invoked from clicking my button that calls it via the
lang.hitch(nt, textChanged(nv));
'this' is:
Window fauxRedirect.lsw?applicationInstanceId=guid%3A1eae6af09bf6f543%3A-6644aeb4%3A13a8a4c429e%3A-7ffe&zWorkflowState=2&zTaskId=p1&applicationId=2&zComponentName=CoachNG&zComponentId=3028.b1094dc3-da2b-461a-8d56-f6444891c174&zDbg=2#%20%20
I've confirmed that 'nt' is indeed the same '
So, I'm trying to execute the textChanged function such that 'this' is set to that value.
Or, if there is a better way to reset a field to its default from another control - that would work as well.
Thanks in advance.
I'm not sure of the full context of what you are trying to do, so don't know if this answers your question?
You can reset all of the widgets within a form to their default value as long as they are wrapped in a dijit/form/Form widget. If all the widgets are wrapped correctly it should be a simple matter of calling reset() on the form.
NB: This will not work for native elements (ie. standard <input> or <textarea> fields, they must be dijit/form/TextBox ...etc).
eg:
<form data-dojo-type="dijit/form/Form" data-dojo-id="theForm">
<label for="field1">Field 1:</label>
<input
type="text" id="field1" name="field1"
data-dojo-type="dijit/form/TextBox" value="default1"
/><br />
<label for="field2">Field 1:</label>
<input
type="text" id="field2" name="field2"
data-dojo-type="dijit/form/TextBox" value="default2"
/>
<br /><br />
<button
type="button"
data-dojo-type="dijit/form/Button"
onclick="theForm.reset();"
>Reset</button>
</form>
Clicking the reset button here should reset the fields to: field1="default1" and feield2="default2".
The form is calling each widget's reset() method. If you create your own widgets you need to ensure that their reset() method works correctly (as well as the _getValueAttr() method for setting their value).
I'm new to dojo and could really use some help with the following 2 field validation examples.
In the following example of a dijit.form.ValidationTextBox field specifying the validator property seems to override the use of the regExp. (ie the field no longer adheres to the regExp rule). How to I make it do both?
<input dojoType="dijit.form.ValidationTextBox"
type="password"
name="password2"
id="password2"
maxLength="50"
trim="true"
regExp="[\w]+"
required="true"
validator="return this.value == dijit.byId('password').value"
invalidMessage="Confirmation password must match password"
/>
I have another similar example where one field depends on the value of another, but I don't have the syntax correct.
<input dojoType="dijit.form.ValidationTextBox"
type="text"
name="homePhone"
id="homePhone"
style="width:20%"
maxLength="10"
trim="true"
required="false"
regExp="[\d]{10}"
validator="return (dijit.byId('preferredContactMethod').value == "home") && (this.value != null)"
invalidMessage="Home phone required (ie. 9198887777)"
/>
Correct; the default implementation of dijit.form.ValidationTextBox.prototype.validator() is to match this.value against this.regExp, as well as check against the various other constraints like this.required. Take a look at the source to see how it's done. If you override that, you're on your own to provide an implementation. Your implementation might choose to delegate to the prototype method and logically 'and' the results with your own tests. You could also override isValid, I suppose.