MVVM 与 kendo ui 框架的使用答案

【问题标题】：MVVM usage with kendo ui frameworkMVVM 与 kendo ui 框架的使用
【发布时间】：2013-04-22 11:27:38
【问题描述】：

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

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

$(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 函数，但在萤火虫中出现以下错误：

ReferenceError: viewModelOrder 未定义

viewModelOrder.updateInstruments();

如何防止出现此错误？

【问题讨论】：

标签： javascript asp.net-mvc mvvm kendo-ui signalr

【解决方案1】：

问题的根源在于您的 viewModelOrder 与网格的文档就绪范围不同。
您不应从同时加载的多个动态加载视图中引用函数/对象。如果一个加载晚于另一个怎么办？还是根本不加载？

我能想到的最简单的解决方案 atm： 1. 同步视图。网格后加载表格。 2.将grid的文档内容移动到一个

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

并在准备好的表单文档中使用该功能

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

编辑：语法。

【讨论】：