![](/forums/images/avatarimages/dc029b1c-b6e7-443c-9706-6afded5992e7avatar_new_square.jpg)
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
sitefinitysteve
asked on 14 Feb 2014, 08:10 PM
I just can;t wrap my head around this...it can't be this hard?
I really just need to do something "like" a tabstrip.
So 4 elements, when one is clicked it becomes selected, the others become deselected. I have an array in my model with Text, Value, Selected properties and a template to render it out.
...Is there some easier way to do this?...or a way that works, because this doesn't :)
I really just need to do something "like" a tabstrip.
So 4 elements, when one is clicked it becomes selected, the others become deselected. I have an array in my model with Text, Value, Selected properties and a template to render it out.
...Is there some easier way to do this?...or a way that works, because this doesn't :)
<script id=
"subfilters-template"
type=
"text/x-kendo-template"
>
# if(data.Selected) { #
<label class=
"selected #: CssClass #"
>
# } else { #
<label class=
"#: CssClass #"
>
# } #
<input type=
"radio"
name=
"subfilters"
value=
"#= Value #"
data-bind=
"click: onSubFilter_Click, checked: selectedSubFilter"
/>
#= Text #
</label>
</script>
onSubFilter_Click:
function
(e) {
var
subFilters =
this
.get(
"subFilters"
);
for
(
var
i = 0; i < subFilters.length ; i++) {
if
(e.data.Text === subFilters[i].Text) {
subFilters[i].Selected =
true
;
}
else
{
subFilters[i].Selected =
false
;
}
}
this
.set(
"subFilters"
, subFilters);
$eceViewModel.refreshEncounters();
},
6 Answers, 1 is accepted
0
Accepted
Hello Steve,
We are not sure what the problem is and the pasted code doesn't help us understand a lot. You paste a template but never say how you use it.
Still I will shoot in the dark and hope for the best.
1. The first issue I see is that you are using if statements in the template. The template may or may not refresh when you change the Selected field depending on how you use it. Normally the template isn't rebound unless you use MVVM inside it - that is data-bind instead of #: #.
2. You are setting MVVM fields without using the set method. This won't notify the parent view model and as a result nothing will change in the UI. Using the set() method is one of the key concepts of Kendo MVVM.
Tabstrip like binding can be done like this: http://jsbin.com/cuyaharu/1/edit
Regards,
Atanas Korchev
Telerik
We are not sure what the problem is and the pasted code doesn't help us understand a lot. You paste a template but never say how you use it.
Still I will shoot in the dark and hope for the best.
1. The first issue I see is that you are using if statements in the template. The template may or may not refresh when you change the Selected field depending on how you use it. Normally the template isn't rebound unless you use MVVM inside it - that is data-bind instead of #: #.
2. You are setting MVVM fields without using the set method. This won't notify the parent view model and as a result nothing will change in the UI. Using the set() method is one of the key concepts of Kendo MVVM.
Tabstrip like binding can be done like this: http://jsbin.com/cuyaharu/1/edit
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
![](/forums/images/avatarimages/dc029b1c-b6e7-443c-9706-6afded5992e7avatar_new_square.jpg)
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 18 Feb 2014, 08:45 PM
Thanks for the demo, the problem was with my set...I was trying it from the root instead of on the object...
Like
this.set("filters[" + i + "].Selected", true);
Not (the proper)
filters[i].set("Selected", true);
Bah, okay thanks!
Like
this.set("filters[" + i + "].Selected", true);
Not (the proper)
filters[i].set("Selected", true);
Bah, okay thanks!
0
![](/forums/images/avatarimages/dc029b1c-b6e7-443c-9706-6afded5992e7avatar_new_square.jpg)
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 16 Mar 2014, 06:55 PM
Any idea why this wouldn't work then?
http://jsbin.com/taxir/3/edit
I have a MVVM method in the template...and it runs, but the join\confirm urls are never updated. So like I could also make THEM methods, but why wouldn't they just re-bind to the dataitem they're bound to in the first place?
http://jsbin.com/taxir/3/edit
I have a MVVM method in the template...and it runs, but the join\confirm urls are never updated. So like I could also make THEM methods, but why wouldn't they just re-bind to the dataitem they're bound to in the first place?
0
Hi,
This happens because of 1. from my initial response:
1. The first issue I see is that you are using if statements in the template. The template may or may not refresh when you change the Selected field depending on how you use it. Normally the template isn't rebound unless you use MVVM inside it - that is data-bind instead of #: #.
You need to use the attr binding instead:
<a data-bind="attr:{ href: JoinUrl}" class="k-button">Join</a>
<a data-bind="attr:{ href: ConfirmationUrl}" class="k-button">Confirmation</a>
Regards,
Atanas Korchev
Telerik
This happens because of 1. from my initial response:
1. The first issue I see is that you are using if statements in the template. The template may or may not refresh when you change the Selected field depending on how you use it. Normally the template isn't rebound unless you use MVVM inside it - that is data-bind instead of #: #.
You need to use the attr binding instead:
<a data-bind="attr:{ href: JoinUrl}" class="k-button">Join</a>
<a data-bind="attr:{ href: ConfirmationUrl}" class="k-button">Confirmation</a>
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
![](/forums/images/avatarimages/dc029b1c-b6e7-443c-9706-6afded5992e7avatar_new_square.jpg)
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 17 Mar 2014, 01:50 PM
No I understand...that's why I have "data-bind="visible: isRegistered" in the template.
" Normally the template isn't rebound unless you use MVVM inside it"
...isn't that "MVVM"? Like THAT part seems to update just fine, but so why when the template rebinds doens't it use the latest version of the object...
" Normally the template isn't rebound unless you use MVVM inside it"
...isn't that "MVVM"? Like THAT part seems to update just fine, but so why when the template rebinds doens't it use the latest version of the object...
0
Accepted
Hello Steve,
Only the attributes specified via the data-bind attribute will be updated when the view model changes. Those things are called bindings and are the only thing which reacts to view model changes. The #: # is a vanilla template expression and are evaluated once when the template is initially rendered.
I hope this clears things up.
Regards,
Atanas Korchev
Telerik
Only the attributes specified via the data-bind attribute will be updated when the view model changes. Those things are called bindings and are the only thing which reacts to view model changes. The #: # is a vanilla template expression and are evaluated once when the template is initially rendered.
I hope this clears things up.
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!