Kendo UI 分层数据网格 - 如何从详细网格编辑器模板 MVVM 访问根视图模型
Kendo UI Hierarchical datagrid - How to access root viewModel from detail grid editor template MVVM
我在网格中有一个网格,其中父网格是在 MVVM 中构建的,子网格在其 data-detail-init 上初始化 http://jsbin.com/kuvejuw
<div data-role="grid"
data-columns="[
{ 'field': 'FirstName'},
{ 'field': 'LastName'}
]"
data-bind="source: dataSource"
data-detail-init="viewModel.detailInit"
>
</div>
如果在 viewModel 和子网格的弹出编辑器中有自定义 属性(例如此处的文本),我想绑定到此 属性。所以例如在更复杂的场景中,我可以通过在 viewModel 上使用一个数组(或可观察数组)来填充一个包含一系列值的下拉列表。
var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource ... // everything works here,
detailInit: detailInit,
Text: "This text should be displayed in editor in detail's grid",
});
kendo.bind(document.body, viewModel);
问题是这个 属性(或整体 viewModel)在细节网格编辑器的模板中检测不到:
function detailInit(e){
...
editable: {
mode: "popup",
template: kendo.template($("#child-editor-template").html())
}
...
}
模板是这样构建的:
<script type="text/x-kendo-template" id="child-editor-template">
<span data-bind="text: Text"></span>
</script>
但我也尝试过 data-bind="text:viewModel.Text"
。我尝试了各种解决方案,在 detailGrid 的编辑事件中在 viewModel 上设置 Text 属性,或在 viewModel 绑定上设置它,但它不适用于此 jsBin(3.2016 版本)。
现在有趣的是,我实际上能够在我的本地项目中使用 2015v3 Kendo UI 访问此 属性,但我无法在此 jsBin 中复制它。
在我的本地项目中,尽管我仍然无法访问 ViewModel 中的事件,例如我可以text: Text
,但不能events: {select: onSelect}
。
如果我对 mvvm 期望过高,访问事件将最终成为问这个问题的原因,如果我对 mvvm 期望过高,我正在寻找一些提示来了解发生了什么。
编辑:
我期待在子网格的弹出式编辑器中启用这种类型的功能http://jsbin.com/canomux
这样试试,
我只是在您的模板中进行了更改,
<script type="text/x-kendo-template" id="child-editor-template">
<input name="ShipCountry"/>
</script>
似乎从 API 中检索数据的方式有点出乎意料,因此更改为:
options.success(e.data.Orders.results.toJSON());
到
options.success(e.data.Orders.results);
文本绑定有效。
绑定事件后它不起作用 - 似乎它与 detailGrid 无关,但通常与描述的网格有关
here
我在网格中有一个网格,其中父网格是在 MVVM 中构建的,子网格在其 data-detail-init 上初始化 http://jsbin.com/kuvejuw
<div data-role="grid"
data-columns="[
{ 'field': 'FirstName'},
{ 'field': 'LastName'}
]"
data-bind="source: dataSource"
data-detail-init="viewModel.detailInit"
>
</div>
如果在 viewModel 和子网格的弹出编辑器中有自定义 属性(例如此处的文本),我想绑定到此 属性。所以例如在更复杂的场景中,我可以通过在 viewModel 上使用一个数组(或可观察数组)来填充一个包含一系列值的下拉列表。
var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource ... // everything works here,
detailInit: detailInit,
Text: "This text should be displayed in editor in detail's grid",
});
kendo.bind(document.body, viewModel);
问题是这个 属性(或整体 viewModel)在细节网格编辑器的模板中检测不到:
function detailInit(e){
...
editable: {
mode: "popup",
template: kendo.template($("#child-editor-template").html())
}
...
}
模板是这样构建的:
<script type="text/x-kendo-template" id="child-editor-template">
<span data-bind="text: Text"></span>
</script>
但我也尝试过 data-bind="text:viewModel.Text"
。我尝试了各种解决方案,在 detailGrid 的编辑事件中在 viewModel 上设置 Text 属性,或在 viewModel 绑定上设置它,但它不适用于此 jsBin(3.2016 版本)。
现在有趣的是,我实际上能够在我的本地项目中使用 2015v3 Kendo UI 访问此 属性,但我无法在此 jsBin 中复制它。
在我的本地项目中,尽管我仍然无法访问 ViewModel 中的事件,例如我可以text: Text
,但不能events: {select: onSelect}
。
如果我对 mvvm 期望过高,访问事件将最终成为问这个问题的原因,如果我对 mvvm 期望过高,我正在寻找一些提示来了解发生了什么。
编辑:
我期待在子网格的弹出式编辑器中启用这种类型的功能http://jsbin.com/canomux
这样试试,
我只是在您的模板中进行了更改,
<script type="text/x-kendo-template" id="child-editor-template">
<input name="ShipCountry"/>
</script>
似乎从 API 中检索数据的方式有点出乎意料,因此更改为:
options.success(e.data.Orders.results.toJSON());
到
options.success(e.data.Orders.results);
文本绑定有效。
绑定事件后它不起作用 - 似乎它与 detailGrid 无关,但通常与描述的网格有关 here