Localization in MVVM

3 posts, 1 answers
  1. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 04 Jun 2014 Link to this post

    I'm trying to do localization for the upload widget using the bindings of the mvvm approach.

    <input type="text" id="upload_field" data-role='upload' data-localization='{"select": local_select}' />

    with local_select being a parameter from my observable object.

    var uploadModel =  new kendo.data.ObservableObject({
    local_select:"Izberi..."
    });

    which is turn bound - var kendoView = kendo.bind($("#portal_content"), uploadModel);

    The expected result is to the input itself showing the content from the object model but it throws an error (undefined) and crashes everything after it.
    If I try using the #= # approach it crashes yet again with saying it's an illegal token. Finally I wrote a string  data-localization='{"select": "Izberi..."}' and it works. It also works if I use any directly accessible js variable. Since I haven't had any significant problems binding any other values to other widgets so far (ok, there have been problems but mostly typos on my side :) ).

    Is there something I'm doing wrong or does kendo have problems binding these values? I did at first thought that you don't have mvvm bindings so I created an extended widget out of upload.

    kendo.data.binders.widget.localization.select = kendo.data.Binder.extend({
                        init: function (widget, bindings, options) {
                            //call the base constructor
                            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                        },
                        refresh: function () {
                            var that = this,
                            value = that.bindings["localization-select"].get(); //get the value from the View-Model
                            $(that.element).data("kendoRcgUpload").localization.select(value); //update the widget
                        }
    });

    But that hasn't worked out either. So I'm currently at a loss what else I could do - And I need to bind the value from the model since I need my code clean as a whistle :)




  2. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 04 Jun 2014 in reply to Dorian Link to this post

    Since I can't edit - I accidentally pasted an older code sample:

    This is the correct code used in my application:

    kendo.data.binders.widget.localization = kendo.data.Binder.extend({
            init: function (widget, bindings, options) {
                //call the base constructor
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
            },
            refresh: function () {
                var that = this,
                value = that.bindings["localization"].get(); //get the value from the View-Model
                console.log(value)
                $(that.element).data("kendoRcgUpload").localization(value); //update the widget
            }
        });
  3. Kendo UI is VS 2017 Ready
  4. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 06 Jun 2014 Link to this post

    Hello,

    The data-localization option is not actually a binding, but a declarative initialization. It has access only to the global scope, but not to the model variables.
    Creating a custom binding is definitely the way to go, but the problem is that the Upload can't update its localization strings once rendered.

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top