This is a migrated thread and some comments may be shown as answers.

How to best access view model properties

3 Answers 283 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
user1843640
Top achievements
Rank 1
user1843640 asked on 10 Dec 2012, 08:36 PM
In all of the examples I've seen, view model properties are accessed using the "this" keyword.  For example:  
this.get("name")
This is not always possible.  Consider the following example:

I have a ListView (mobile, btw) and above it I have a search text box that does an "instant search" of sorts while the user types.  The text box looks something like this:
<input type="text"
data-value-update="keyup"
data-bind="value: searchText, events: { keyup: searchForItem }" />
searchForItem makes an async ajax call and the success callback updates the ListView.  The trouble is that "this" does not refer to the view model in the call back.  What is the right way to access the view model and it's properties in this type of situation?  The only way I seem to be able to do this is to make all the view models available from the global name space.  For example:
//app is global
app.viewmodels.carsViewModel.get(
"cars").push(car);
This seems to work but is there a better or more elegant approach?  Not to mention that I am using require.js to organize my project and would prefer to have nothing in the global namespace.

BTW, I am running into the same problem with declarative binding.  Since I am using require.js it seems like the only way I can reference tthe view model is something like this:
<div id="carsView"
    data-role="view"
    data-model="app.viewmodels.carsViewModel">

Thanks!


3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 12 Dec 2012, 01:51 PM
Hello,

The success callback will be in different context. You could save the viewModel in a parameter in the event handler and then use it in the callback:

var self = this;
$.ajax({
    success: function () {
        self.get("Field")
    }
Require.js support is planned for the next release. Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Yaroslav
Top achievements
Rank 1
answered on 25 Dec 2012, 11:00 AM
As far as I understand it is intended to declare and instantiate viewmodel at once with code like:
var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});

This leads to situation where viewmodels live as global objects in theirs scopes.
The question – is there any other way to define viewmodel?
I mean something more similar to classical approach when we at first declare structure of the ‘class’ and later create new instance of it and use it.
There is a model definition mechanism: kendo.data.Model.define…
How could it be used with defining viewmodels?
0
Atanas Korchev
Telerik team
answered on 26 Dec 2012, 08:33 AM
Hi Yaroslav,

 The model inherits from the observableobject so you can use models as viewmodels. First define your model and then instantiate new instances of it.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
user1843640
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Yaroslav
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or