使用 MVVM 编辑 Kendo UI Grid 弹出窗口答案

【问题标题】：Kendo UI Grid popup editing with MVVM使用 MVVM 编辑 Kendo UI Grid 弹出窗口
【发布时间】：2013-03-05 16:28:33
【问题描述】：

我正在使用 Kendo UI Grid，我已将其配置为使用自定义模板进行弹出编辑

    <script id="popup_editor" type="text/x-kendo-template">
    <div id="editor">
            <div class="k-edit-label">
                <label for="Type">Type</label>
            </div>

    <select data-role="dropdownlist" data-value-field="Type" data-text-field="Type"
                         data-bind="source: typeSource, value: selectedProduct"></select>

<div class="k-edit-label">
                <label for="Type">Option</label>
            </div>

<select data-role="dropdownlist" data-value-field="Option" data-text-field="Option"
                         data-bind="source: productsSource.Options, value: selectedOption"></select>
            </div>

</script>

这是我的 ViewModel：

    function ViewModel() {
        var getTypesUrl = "/Controller/Action";

        var viewModel = kendo.observable({
            typeSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: getConditionTypesUrl,
                        dataType: "json"
                    },
                },
                batch: true,
                schema: {
                    model: {
                        id: "Type"
                    }
                }
            }),
            selectedType: null,
            selectedOption: null
        });

        kendo.bind($("#editor"), viewModel);
    }

ViewModel();

我的操作返回 JSON。

问题是，当我点击“添加新记录”按钮时，没有调用getTypesUrl 并且没有填充下拉列表。一般的想法是为不同的类型提供不同的选项，并根据所选类型填充选项下拉列表。我相信，之所以会出现问题，是因为仅在单击按钮时才显示编辑器，并且剑道无法创建绑定。

【问题讨论】：

标签： mvvm binding kendo-ui kendo-grid

【解决方案1】：

如果每一行的下拉列表都相同，则从数据源获取其值，并将这些值存储在 JavaScript 页面中的变量中，并将下拉列表指向此新数据源。使用一些 JavaScript 来关联 id 和 name。

或者，如果这是基于其他逻辑加载的，则执行单独的调用以填充视图模型中下拉列表的数据源。

http://www.aspnetwiki.com/page:introduction-to-kendo-mvvm

http://www.aspnetwiki.com/page:kendo-mvvm-ui-grid

进一步注意，您可以纯粹用 JavaScript 编写模板并将其绑定到 html，这样做的好处是您可以调试它，并且以后仍然可以通过 ajax 调用加载它，而且它可能会更小。

【讨论】：