Suppose I have a very simple component, called Simple.svelte:
<script>
let value;
</script>
Give me a value: <input type="text" bind:value={value} />
Now in a more complex component, I would like to use a <svelte:component /> tag so that I generalize a pattern in my application (say, Complex.svelte):
<script>
import Simple from './Simple.svelte';
...
let templateComponent = Simple;
</script>
<svelte:component this={Simple}>
In this simple case, I'd like to bind to Simple's value prop, is there any way I can do that?
... just forgot to export the item prop on Simple.svelte:
<script>
export let value;
</script>
Give me a value: <input type="text" bind:value={value} />
Yes you can.
<script>
import Simple from './Simple.svelte';
let value;
</script>
<svelte:component this={Simple} bind:value/>
Svelte REPL
Related
I have a laravel webapp that uses multiple forms. I have recently introduced Vue.js v2 to deal with some specific custom input types which are working well.
Problem is that ordinary html5 input[type=time] inputs that are inside the vue instance element are not rendered properly in iOS safari/chrome - they appear as native timepickers but appear to have a blank value. When you click to change they do display the correct value.
I can workaround by using a custom vue component that just passes the value property into the vue instance but I figure I must be doing something wrong because I can't find a single mention of this anywhere.
I have managed to reproduce this on JSFiddle problem only appears in mobile browsers
html
<div id="app" style="background-color:lightblue; padding:30px">
<h3>This div is the Vue element</h3>
<form action="">
<p>
<label for="">Standard Input</label>
<input type="time" value="23:24:00" />
</p>
<p>
<label for="">Vue Component</label>
<vue-time value="13:45:00"></vue-time>
</p>
</form>
</div>
<div style="background-color:lightyellow; padding:30px">
<h3>This div is outside the Vue instance</h3>
<form action="">
<label for="">Standard Input</label>
<input type="time" value="23:24:00" />
</form>
</div>
js
Vue.component('vue-time', {
template: '<input type="time" :value="value">',
data() {
return {
value: ''
}
}
});
const vue = new Vue({
el: '#app',
data() {
return {
value: ''
}
}
});
I had a somewhat similar problem and I found this thread that helped me, see if it helps you:
https://forum.vuejs.org/t/solved-fixed-position-element-disappears-during-transition-on-mobile-browsers/8960
I would comment on your question instead of proposing this as an answer but I don't have the reputation to do so yet.
I have a value for user display and a similar value for storage. How can I modify what I have so that I save the correct data to the model?
Fiddle
HTML
<div>formatted value for user display</div>
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<div>unformatted value (the one I'd like to save)...this is not model bound</div>
<input type="text" data-bind="value: unitOfCost" />
JavaScript/Knockout
function AppViewModel() {
var self = this;
self.unitOfCost = ko.observable(1.01).extend({
isServerSet: false
});
self.formattedUnitOfCost = ko.computed({
read: function () {
return '$' + self.unitOfCost().toFixed(2);
},
write: function (value) {
// Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
value = parseFloat(value.replace(/[^\.\d]/g, ""));
self.unitOfCost(isNaN(value) ? 0 : value); // Write to underlying storage
},
owner: self
});
}
ko.applyBindings(new AppViewModel());
The unformatted value is not displayed to the user. Model_Bound_ID is user editable.
You're doing it the wrong way.
Your model bound control (I mean the control that will be posted to your controller, and has the unformatted value) should be created like any other control, for example using Html.HiddenFor or whatever you want in your (Razor?) template. And you must add the data-bind attribute in the template. Remember that low-dash will be converted in medium-dash, so you can add it in the attributes parameter of the Html Helper like this: { data_bind = "value: unitOfcost" }.
Obviously this hidden field will be sent to the controller when posted (direct post, ajax, or whatever).
Now you need to add the visible control, and bind it to another observable. This observable will be a computed observable, which will do this:
on read, it will take the value from unitOfWork, and return it formatted
on write, it will parse the value to convert it to number, and update the unitOfWork observable with the parsed value
In fact you've got nearly all the code, but were implementing it all the way back.
Another way of looking at this answer is to change the html from this:
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<input type="text" data-bind="value: unitOfCost" />
to this
<input type="text" data-bind="value: formattedUnitOfCost"/>
<input type="text" data-bind="value: unitOfCost" id="Model_Bound_ID" />
And KO does the rest by the power of the observables. Gosh I love KO
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to send multiple arguments to jQuery click function?
I want to pass multiple arguments to a Jquery function. Below is the Javascript sample code. I want to convert this javascript function to a jquery function. How can I pass that arguments into a jquery onclick event?
<a onclick="showState('state_name','state_id')">ADD STATE </a>
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
Perhaps I'd use datasets here:
HTML:
<a data-state_name="state_name" data-state_id="state_id" >ADD STATE</a>
JS:
$(function() {
...
$('a[data-state_id]').click(function() {
var $this = $(this);
showState($this.data('state_name'), $this.data('state_id'));
return false;
});
...
});
You actually don't have to jwrap the clicked object, as you can get the attribute values with either dataset API (if you have the luxury of not supporting IE9-, though) or simple getAttribute method. Yet I found this syntax more clean and readable.
The correct way is:
ADD STATE
<script type="text/javascript">
$(document).ready(function(event) {
event.preventDefault();
$('#myanchor').on('click', function() {
openbox_state( $(this).data('nm') , $(this).data('id'));
});
});
</script>
Your Jquery Code:
<script language="javascript" type="text/javascript">
var state_name=$('#txtName').val();
var state_id=$('#txtid').val();
$(document).ready(function () {
$('a').click(function(){
showState(state_name,state_id);
});
});
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
</script>
Your HTML:
ADD STATE
<input type="text" id="txtName" value="Tom Cruse" />
<input type="text" id="txtid" value="1" />
this jquery take the values from inputs, by using their id and use them as parameters to call the method.
If what you need is to pass additional data to be used in the event handler, jQuery click event binder supports this already. But in order to use it you have to bind the event handler through code instead of inline binding.
$(function(){
$('#id').click({additional : "data"},function(){ // handler code});
});
Check documentation: http://api.jquery.com/click/
With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/
I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.
Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/
I solved this with two steps;
1) unwrapping the label from the input and hooking them together with 'for' attribute
<input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
<label data-bind="uniqueIDFor: true" >Click me</label>
ko.bindingHandlers.uniqueIDFor = {
init: function (element) {
element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
ko.bindingHandlers.uniqueID = {
init: function (element) {
element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
2) telling jqm to update the new content
$('input:checkbox').trigger('create');
I would change the model for this:
<!-- ko foreach: listItems-->
<input type="checkbox" name="itemsList" value="name" />
<span data-bind="text: name"></span>
<!-- /ko -->
the main thing to consider is the "value" property in the input control to render in the proper way.
Regards.
#tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/
I am declaring variable in the click of a link in MVC. Assigning it the value of the "li" text I want to access this variable in my Html page. Or we can say outside the script.
Here is the code snippet.I just want the value of name variable to be accessed on the page.
<script type="text/javascript">
$("a.commentLink").live("click", function () {
var name = $(this).closest("li").text();
});
</script>
Thanks in advance.
Place it in an element within your form, e.g.
<form>
<input type="hidden" id="name" name="name" />
And then in code:
var name = $(this).closest("li").text();
$("#name").val(name);
mainPage.jsp: Your Script page
<script type="text/javascript">
$("a.commentLink").live("click", function () {
var name = $(this).closest("li").text();
enqueue("demoPage.jsp?nameParam="+name,respAjax);
});
function respAjax(){
// You can submit or do something or leave it as it is //
}
</script>
Demo.jsp ----: here you can set value to a Session variable so that you access any
were in project or set to a URL parameter
String name = request.getParameter("nameParam");
response.sendRedirect("mainPage.jsp")
session.setAttribute("name",name);`enter code here`
OR
response.sendRedirect("mainPage.jsp?namPar="+name)
enqueue function can be accessed from ajax file --
For Ajax File : How can I convert a JavaScript variable to a Java variable?