MVVM使用剑道ui框架

MVVM usage with kendo ui framework

本文关键字：ui 框架 MVVM      更新时间：2023-09-26

我有两个视图，它们有自己的视图模型。其中一个只包含一个网格，另一个包含一个表单。我正在同时动态加载其中两个。

这是我的视图包含网格的视图模型:

$(function () {
var ticker = $.connection.marketWatch;
var initializationData = null; // marketWatchData 
function init() {
    return ticker.server.getAllMarketWatchData().done(function (data) {
        initializationData = data;
        $("#marketWatchGrid").data("kendoGrid").dataSource.data(data);
    });
}
// Add client-side hub methods that the server will call
$.extend(ticker.client, {
    updateMarketWatchData: function (marketWatchData) {
        // do something...
    }
});
// Start the connection
$.connection.hub.start()
    .pipe(init)
    .done(function () {
        viewModelMarketRates.data = initializationData;
        viewModelOrder.updateInstruments();
    });
});
var viewModelMarketRates = kendo.observable({
    data: null
});
kendo.bind($("#marketWatchGrid"), viewModelMarketRates);

和我的视图的视图模型包含表单:

$(function () {
var viewModelOrder = kendo.observable({
    instruments: viewModelMarketRates.data,
    selectedInstrument: "EURUSD",
    amount: "0.1",
    slActivate: false,
    sl: "0.0",
    tpActivate: false,
    tp: "0.0",
    buy: function () {
        //e.preventDefault();
        //alert("buy");
    },
    sell: function () {
        //e.preventDefault();
        //alert("sell");
    },
    updateInstruments: function () {
        this.set("instruments", viewModelMarketRates.data);
        this.set("selectedInstrument", "EURUSD");
    }
});
//viewModelOrder.instruments = viewModelMarketRates.data;
//alert(viewModelOrder.instruments.length);
kendo.bind($("#orderForm"), viewModelOrder);
});

如你所见，我在init函数中获得市场利率数据，并将其存储在viewModelMarketRates的数据属性中。我调用viewModelOrder的updateInstruments函数，但在firebug中，我得到以下错误:

ReferenceError: viewModelOrder is not defined

viewModelOrder.updateInstruments ();

如何防止这个错误?

  1. 你的问题的来源是，你的viewModelOrder是在不同的范围比网格的文档准备。
  2. 你不应该从多个同时加载的动态视图中引用函数/对象。如果一个加载晚于另一个呢?还是根本不加载?

我能想到的最简单的解决方案:1. 同步视图。电网后的负载形式。2. 将grid文档的内容移动到

function grid_ready(){
//all that ticker and connections start stuff
}

并在form的document中使用该函数

$(function(){
//create view model etc,
grid_ready();
});

编辑:语法。

相关文章：