Modify an Array, it's not this diffucult, right?

[sitefinitysteve]

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 :)

<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();
},

[Atanas Korchev]

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

[sitefinitysteve]

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!

[sitefinitysteve]

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?

[Atanas Korchev]

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

 

 

[sitefinitysteve]

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...

[Atanas Korchev]

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