Javascript 无法在devextreme/knockout中处理绑定

我有另一个函数从服务器调用“GetEmployee”函数，当我在Chrome调试器中检查调用时，我可以看到我的详细信息，如预期的那样，因此这不是服务器端错误

但是，如果我在

quickBookingSource

的第三行上放置断点，则永远不会到达断点。我在viewModel定义中有

quickBooking:quickBookingSource

，并且没有输入错误

另外，您会看到我添加了一个三元运算符，其中包含“blah”文本作为安全网，但没有效果

我收到的错误消息是：

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

代码是：

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>

---

提前谢谢

我在下面的提琴中复制了你的案例

使用setTimeout模拟对服务器的请求。 您可以单击“刷新”按钮重新加载数据源。演示表明您的代码工作正常。如果服务器代码正常，问题似乎出在幕后的客户端代码中

<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);

加载。。。


杰兹·比兴

//存根服务呼叫
var callService=函数（方法、数据、成功）{
var fakeData=[
{LastNProjects:{Name:'testproject1'}，LastNCostCenters:{Name:'cost center1'}，
{LastNProjects:{Name:'testproject2'}，LastNCostCenters:{Name:'costcenter2'}，
{LastNProjects:{Name:'testproject3'}，LastNCostCenters:{Name:'costcenter3'}，
{LastNProjects:{Name:'testproject4'}，LastNCostCenters:{Name:'costcenter4'}
];
setTimeout（函数（）{
成功（伪造数据）；
}, 1500);
};
var quickBookingSource=DevExpress.data.createDataSource({
加载：函数（加载选项）{
vm.loading（true）；
if（loadOptions.refresh）{
var DEREFERED=新的$.DEREFERED（）；
callService（“GetEmployee”，
{
雇员编号：“id”
},
功能（结果）{
var-mapped=$.map（结果、函数（数据）{
返回{
名称：data.LastNProjects？data.LastNProjects[“name”]：“blah”，
项目：data.LastNProjects？data.LastNProjects[“地址”]：“blah”，
成本中心：data.LastNCostCenters？data.LastNCostCenters[“Name”]：“blah”
}
});
延迟。解决（映射）；
vm.load（假）；
});
延迟返回。承诺（）；
}
},
});
var vm={
负载：可观察到的高（假），
重载数据：函数（）{
quickBookingSource.load（）；
},
瓷砖宽度：300，
quickBooking:quickBookingSource，
sendProject:函数（args）{
log（“发送”+args.itemData.name）；
}
};
ko.应用绑定（vm）；

一目了然，项目财产是可观察的吗？quickBookingSource中的数据是否被放入绑定到HTML的主ViewModel上的可观察对象中？@William project不是可观察对象。我主要是从同一个项目中的另一个视图复制了tilewidget中的代码，该视图工作正常。错误听起来像KO在绑定到UI的VM上寻找一个可观察的命名项目，但找不到它。你的viewmodel看起来像什么？哦。。。裤子。为了使代码尽可能可读，我缩短了一些出错的HTML。我在数据绑定字符串的双引号中有双引号。我是个白痴。谢谢大家的时间

<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);