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

Sync remote datasource with switch

2 Answers 124 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
d2uX
Top achievements
Rank 1
d2uX asked on 17 Jul 2012, 02:01 PM
Hi there,

I'm new to kendo and just exploring the almighty MVVM. Since I guess I grasped the fundamentals I wanted go a bit further.
I set up a small environment which let's me query data from a remote database (a PHP-script). Binding this data to a kendo.observable works!

Now, in a detail view, I want to provide a switch, that changes the status of the corresponding record.
Here's the template of the detail view:
<div data-role="content">
    <aside>
        <p>Hello, I'm the Detail's page (Product)</p>
    </aside>
    <h2 data-bind="text: product.desc"></h2>
    <p data-bind="text: product.price"></p>
    <p data-bind="text: isChecked"></p>
    <p>visible <input id="visibilitySlider" data-role="switch" data-bind="checked: isChecked" /></p>
</div>

When fetching the data the isChecked method is executed (which simply returns true or false, depending on the database value)
var productDetailModel = kendo.observable({
    isChecked: function() {
        var product = this.get('product');
        if(typeof product != 'undefined')
        {
            return (product.status == 1)?true:false;   
        }
        productDS.sync();
    }
})

I though simply calling DS.sync() would synchronize the model data with the server data, but a test console.log() isnt't even called upon clicking the slider (which I thought reacts to the checked-binding)

Here are my model and the used DS
var Product = new kendo.data.Model.define({
    id: 'id'
});
 
var productDS = kendo.data.DataSource.create({
    transport: {
        read: {
            url: '/get.php',
            dataType: 'jsonp',
            data: {
                type: 'products'
            }
        },
        update: {
            url: '/set.php',
            type: 'POST'
        }
    },
    schema: {
        model: Product
    },
    requestStart: function() {
        app.showLoading();
    },
    pageSize: 10
});

So my question is: How do I keep the data from the (hopefully correctly defined)  Model in sync with the server data (everytime s.o. changes the slider)

Thx

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Jul 2012, 12:00 PM
Hello Erik,

I am afraid that your scenario is a bit unclear. Judging by the usage of app.showLoading(); and data-role="switch" I assume that you would like to build a mobile application. If that is the case, you should hook up to the change event of the control via data-change="isChecked" (where isChecked is a name of the event handler function). To illustrate the approach I prepared a small example.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
d2uX
Top achievements
Rank 1
answered on 20 Jul 2012, 12:39 PM
Thx for the reply.
My problem was, that the switch (which should change a boolean value) wasn't recognized by the DS.sync() event. I guess that was because I wired it up wrong. I also came up with binding it to data-change. And that worked ;)
Now I'm binding the value that actually should be changed to the switch's "checked" binding. After this I'm calling the DS.sync() (when hitting the backbutton) and it tracks the change correctly and syncs back to the dataSource.
For anyone interested:

data-bind="checked: product.status"
<a data-role="backbutton" data-align="left" href="#tab-products" data-click="syncProductData">Back</a>

So it was completely the wrong direction for what I tried to achieve (maybe thats why it was a bit unclear)
Thx again...
Tags
MVVM
Asked by
d2uX
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
d2uX
Top achievements
Rank 1
Share this question
or