How to bind input value in emblem.js - emblem.js

I have a filter attribute in my controller which I want to bind to the corresponding DOM element.
So far, I am able to display filter value, doing:
%input type="text" value=filter
But what I want is to reflect input changes back to filter, with a bidirectional binding...
Any clue?

= input valueBinding="filter"
is cleaner.

view Ember.TextField valueBinding="filter"

= input value=filter
or even with a sub property :
=input value=object.property
both works.

Related

Input Value is not getting updated when state object is set to undefined

I have list of options (radio button) and on selection of each option, it will display some input fields to take value from user. These values are stored in state "Dimensions". On option change, I am resetting the dimension object to undefined. But this is value is not getting updated in the input field and it is taking old values.
Text field:
<input value={dimensions ? dimensions[opt?.value?]: undefined}/>
On Option Change Method:
const handleOptionChange = (e: any) => {
setDimensions(undefined);
};
Can anybody please guide me through this.
Thanks inadvance!
In ReactJS, input value should always be defined, even if it is an empty string
<input value={dimensions ? dimensions[opt?.value?]: ''}/>

ngModel - delete last character

i am using mat-radio-group to bind my data. here data & value are same. which means i have 4 value binded and all 4 value are same. So to differentiate the radio buttons i added index as last value for every radio button.
Now i want to fetch this radio button value into my typescript and also eliminate the lastcharacter(which is index). so i use ngModel & ngModelChange.
I can get the output. but the `mat-radio-button' is not selecting
Here is my code
`
<mat-radio-group class="radioButtonAxis" [(ngModel)]="ngM_Fax" (ngModelChange)="onFaxChange($event)">
<mat-radio-button *ngFor='let data of resultSet;index as i' [value]='data.Fax+i'>{{data.Fax}}</mat-radio-button>
</mat-radio-group>
onFaxChange(value){
this.ngM_Fax = value.substring(0, value.length - 1);
}
`
expecting your help on this.
You are using ngModel wrong. The right value is always in this.ngM_Fax, but it has to match 100% [value]. If you want to use the variable without the index, i would suggest to use an extra variable.
Here is a working StackBlitz.

Elm - onBlur from dynamically created input

The onBlur event in Html.Events does not allow for any values to be passed with it, as far as I understand. There is a way to make it include the value of the input (see this question for example: Elm Html.Events - Pass input value to onBlur message), but how can I also make it include another value?
My use case is that I generate a list (ul) from a list I have in my model, and this list can be any size, so I can not have a specific message for each input. Instead I would like something like this for each item:
input
[ value someValue
, onBlur UpdateItem uniqueId
]
[]
That way I could update the specific item in my model based on the id I got from the onBlur message.
How can I do this?
Update:
To clarify my question: I also need the value from the input, so I need to both pass my id and get the targetValue (as in the question I linked above).
(For future visitors: I use Elm 0.18)
My suggestion would be to use onChange, which you need to define yourself, and is triggered at the same time as the blur event.
onChange : (String -> msg) -> Attribute msg
onChange msgCreator =
Html.Events.on "change" (Json.map msgCreator Html.Events.targetValue)
then define a message to carry the new value and its id
type Msg
= UpdateItem Id String
and then make sure to use the defaultValue attribute (rather than value)
input
[ defaultValue someValue
, onChange (UpdateItem uniqueId) ]
[]

Getting model value and generated ID from within simple_form custom input

I'm trying to make a custom input type with simple_form that will implement combobox-type functionality using jQuery-Autocomplete
. What I need to do is output a hidden field that will hold the ID of the value selected and a text field for the user to type in.
Here's what I have so far:
class ComboboxInput < SimpleForm::Inputs::Base
def input
html = #builder.hidden_field(attribute_name, input_html_options)
id = '' #what?
value = '' #what?
return "#{html}<input class='combobox-entry' data-id-input='#{id}' value='#{value}'".html_safe
end
end
I need to get the ID of the hidden field that simple_form is generating to place as an HTML attribute on the text entry to allow the JavaScript to "hook up" the two fields. I also need to get the value from the model to prepopulate the text input. How do I do this from within my custom input?
I'm looking for the id as well, but I did get the value:
def input
current_value = object.send("#{attribute_name}")
end
I just found a hokey id workaround:
html = #builder.hidden_field(attribute_name, input_html_options)
id = html.scan(/id="([^"]*)"/).first.first.to_s
I know it's a hack, but it does work. Since we don't have access directly to this type of resolution, it is likely to keep working even if the underlying id creation code changes.

How to use AjaxResponse.Render() to replace a span's text in MVC?

I am replacing 2 divs using with AjaxResponse.Render() which have 2 associated partial views with them.
But there a span like the following:
<span id="total-counts">23 comments</span>
I need to replace this value as well. How do I call the with AjaxResponse.Render() to replace this value?
There is no associated view with this span. It might be easy thing but I can't make it work.
I tried these:
Note the second param is the view name.
AjaxResponse.Render("#total-counts", "string", comments.Count, UpdateStyle.Replace);
AjaxResponse.Render("#total-counts", "", comments.Count, UpdateStyle.Replace);
None of these work. I don't want to create a partial view unless it is the only way.
Thx
On Ajax Success Callback use as
$("#total-counts").html(' ');
$("#total-counts").html(comments.Count+" Comments");

Resources