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

7 posts, 2 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 14 Feb 2014 Link to this post

    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();
    },
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 18 Feb 2014 in reply to Atanas Korchev Link to this post

    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!
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 16 Mar 2014 Link to this post

    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?
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 17 Mar 2014 in reply to Atanas Korchev Link to this post

    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...
  8. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready