Closed aubrijesh closed 1 year ago
I see you haven't gotten a response for over a year. It seems to work fine in vanilla Javascript. Is it possibly an issue on JQuery's end for triggering events pragmatically?
<script src="https://cdn.jsdelivr.net/gh/blikblum/tinybind/dist/tinybind.js"></script>
<body>
</body>
<script>
var DATA = {
"model": {
"selectedFriend": "",
"friends": [
{ "name": "one" },
{ "name": "two" }
]
}
};
var HTML = `
<span>Selected Friend: {model.selectedFriend}</span>
<select
class="user-list"
rv-value="model.selectedFriend"
>
<option
rv-each-friend="model.friends"
rv-value="friend.name"
rv-text="friend.name"
></option>
</select>
`;
document.body.innerHTML += HTML;
tinybind.bind(document.body, DATA);
window.selectDemo = DATA;
setTimeout(
function()
{
var select = document.body.querySelector(".user-list");
select.value = "one";
select.dispatchEvent(new Event('change'));
},
3000
);
</script>
Hi, Looks like JQuery element trigger is not working as I am unable to see updated value in template when programmatically setting value to dropdown and triggering change. it was working fine with rivets js
Example: template = $(`
Selected Option {model.selectedFriend}`) var nObj = { 'selectedFriend': "", "friends": [{'name': 'one'}, {'name': 'two'}] } self.$el.append(template ); tinybind.bind(template , {model: nObj});
When I am using javascript to update dropdown selected value $('.user-list').val('one').trigger('change'); it is reflecting value in dropdown but not updating value in span. May be I am doing something wrong. Can someone help me find out what is the issue.