Unable to process binding in devextreme / knockout

Question

I have another function that calls the `"GetEmployee" function from the server and when I check the call in the Chrome Debugger I can see my details coming through as expected so it's not a server side error.

However, if I place a breakpoint on the third line of quickBookingSource the breakpoint is never reached. I do have quickBooking:quickBookingSource in the viewModel definition and there are no typos.

Also, you'll see I have added a ternary operator with "blah" text as the safety net but to no avail

The error message I'm getting is:

    Uncaught ReferenceError: Unable to process binding "text: function (){return project }"
Message: project is not defined 

Code is:

HTML

<div data-bind="dxTileView: {listHeight:tileWidgetHeight,itemClickAction:sendProject,baseItemHeight: 80, baseItemWidth: 100,dataSource:quickBooking}">
            <div data-options="dxTemplate : { name:'item' }" class="tile">
                <h2 data-bind="text: project"></h2>
                <p data-bind="text: name"></p>
                <p data-bind="text: costCenter"></p>
                <p>Jetzt Büchen</p>
            </div>
</div>

JS

var quickBookingSource = DevExpress.data.createDataSource({
        load: function (loadOptions) {
            if (loadOptions.refresh) {
                var deferred = new $.Deferred();
                callService("GetEmployee",
                    {
                        employeeNo: aktivEmployee.id
                    },
                function (result) {
                    var mapped = $.map(result, function (data) {
                        return {
                            name: data.LastNProjects? data.LastNProjects["Name"]:"blah",
                            project: data.LastNProjects? data.LastNProjects["Address"]:"blah",
                            costCenter: data.LastNCostCenters? data.LastNCostCenters["Name"]:"blah"
                        }
                    });
                    deferred.resolve(mapped);
                });
                return deferred.promise();
            }
        },
    });

Thanks in advance

Answer 1

I reproduced your case in the following fiddle http://jsfiddle.net/tabalinas/7aSS7/.

Request to server is mocked with setTimeout. You can click Refresh button to reload dataSource. The demo shows that your code works correctly. It seems that problem is in client code behind the scene if server code is ok.

<div class="dx-viewport dx-theme-ios dx-version-major-6 dx-theme-ios-typography">
    <div data-bind="dxButton: { text: 'Refresh', clickAction: reloadData }"></div>
    <span data-bind="visible: loading">Loading ...</span>
    <div data-bind="dxTileView: { listHeight: tileWidgetHeight, itemClickAction: sendProject, baseItemHeight: 200, baseItemWidth: 100, dataSource: quickBooking }">
        <div data-options="dxTemplate : { name:'item' }" class="tile">
            <h2 data-bind="text: project"></h2>
            <p data-bind="text: name"></p>
            <p data-bind="text: costCenter"></p>
            <p>Jetzt Büchen</p>
        </div>
    </div>
</div>

// stub service call
var callService = function(method, data, success) {
    var fakeData = [
        { LastNProjects: { Name: 'test project1' }, LastNCostCenters: { Name: 'cost center1' }},
        { LastNProjects: { Name: 'test project2' }, LastNCostCenters: { Name: 'cost center2' }},
        { LastNProjects: { Name: 'test project3' }, LastNCostCenters: { Name: 'cost center3' }},
        { LastNProjects: { Name: 'test project4' }, LastNCostCenters: { Name: 'cost center4' }}
    ];

    setTimeout(function() { 
        success(fakeData);
    }, 1500);
};

var quickBookingSource = DevExpress.data.createDataSource({
    load: function (loadOptions) {
        vm.loading(true);
        if (loadOptions.refresh) {
            var deferred = new $.Deferred();
            callService("GetEmployee",
                        {
                            employeeNo: 'id'
                        },
                        function (result) {
                            var mapped = $.map(result, function (data) {
                                return {
                                    name: data.LastNProjects? data.LastNProjects["Name"]:"blah",
                                    project: data.LastNProjects? data.LastNProjects["Address"]:"blah",
                                    costCenter: data.LastNCostCenters? data.LastNCostCenters["Name"]:"blah"
                                }
                            });
                            deferred.resolve(mapped);
                            vm.loading(false);
                        });
            return deferred.promise();
        }
    },
});


var vm = {

    loading: ko.observable(false),

    reloadData: function() {
        quickBookingSource.load();
    },

    tileWidgetHeight: 300,

    quickBooking: quickBookingSource,

    sendProject: function(args) {
        console.log("send " + args.itemData.name);
    }
};

ko.applyBindings(vm);