Javascript 更改角度模型以更新剑道
我一直在为一个项目使用Angular,最近才发现关于剑道Angular项目。我成功地将角度剑道加入到我的项目中,它的工作方式和我认为的一样,除了像我习惯的那样更新模型 这个项目正是我要寻找的,但是,文档中没有任何示例实际显示您能够更新角度模型,从而更新剑道数据源 下面是一段代码,例如:Javascript 更改角度模型以更新剑道,javascript,angularjs,kendo-ui,angular-kendo,Javascript,Angularjs,Kendo Ui,Angular Kendo,我一直在为一个项目使用Angular,最近才发现关于剑道Angular项目。我成功地将角度剑道加入到我的项目中,它的工作方式和我认为的一样,除了像我习惯的那样更新模型 这个项目正是我要寻找的,但是,文档中没有任何示例实际显示您能够更新角度模型,从而更新剑道数据源 下面是一段代码,例如: $scope.data = new kendo.data.DataSource({ data: [{ name: "India", data: [10, 7.943, 7.
$scope.data = new kendo.data.DataSource({
data: [{
name: "India",
data: [10, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 7.832, 4.3, 4.3]
}, {
name: "Haiti",
data: [0.253, 0.362, 3.519, 1.799, 2.252, 3.343, 0.843, 2.877, 5.416, 5.590]
}]
});
有了Angular,我们可以想象出这样的东西:
<input ng-model="data[0].data[0]" />
scope.$watch(attrs.kDataSource, function (mew, old) {
if (mew !== old) {
element.data('$kendoDataSource', toDataSource(mew, type));
var role = element.data("role");
var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
var w = element.data("kendo" + widgetType);;
if (!w) {
w = kendo.widgetInstance(element, kendo.ui);
}
if (w && typeof w.setDataSource === "function") {
w.setDataSource(element.data('$kendoDataSource'));
}
}
}, true);
<div kendo-grid
k-data-source="products"
k-selectable="'row'"
k-columns='[{ "field": "ProductName", "title": "Name" },
{ "field": "Supplier.SupplierName", "title": "Supplier" },
{ "field": "Category.CategoryName", "title": "Category" }]'
k-sortable="true"
k-groupable="true"
k-filterable="true">
</div>
输入字段中的输出将为10
。但是,当将此数据传递给图形并尝试更改输入框中的值时,图形不会更新
有这些特定库经验的人都知道如何实现这样的功能吗?这种支持是否存在?这仅仅是一个库,让剑道可以用角度而不是别的什么来工作吗?我解决了这个问题,但现在以我期待的方式解决了 我只是将一个更改事件绑定到输入,并调用Kendo
redraw()
方法,每次更新模型时它都会重新绘制。考虑到剑道已经为此付出了全部努力,这有点恼人。您可能会认为双向绑定是可用的
仍然在寻找一个更好的答案,如果有的话。请注意,AngularKendo的作者和/或对AngularJS有更深入了解的人可能会因为我“做错了”而用石头砸死我,但下面是:
angular剑道已经在数据源上使用了一个$watch
,因此如果您将一些代码添加到它最初在那里执行的操作中,例如:
<input ng-model="data[0].data[0]" />
scope.$watch(attrs.kDataSource, function (mew, old) {
if (mew !== old) {
element.data('$kendoDataSource', toDataSource(mew, type));
var role = element.data("role");
var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
var w = element.data("kendo" + widgetType);;
if (!w) {
w = kendo.widgetInstance(element, kendo.ui);
}
if (w && typeof w.setDataSource === "function") {
w.setDataSource(element.data('$kendoDataSource'));
}
}
}, true);
<div kendo-grid
k-data-source="products"
k-selectable="'row'"
k-columns='[{ "field": "ProductName", "title": "Name" },
{ "field": "Supplier.SupplierName", "title": "Supplier" },
{ "field": "Category.CategoryName", "title": "Category" }]'
k-sortable="true"
k-groupable="true"
k-filterable="true">
</div>
然后你所寻找的行为起了作用。我不知道为什么这个(好吧,类似的,但更好)没有实现;对我来说,这似乎是一个核心特性,但可能有一些原因我不明白(我还没有真正阅读这里的所有源代码)。在任何情况下,必须手动将更改事件处理程序附加到输入以更新UI对我来说也不是很“有角度”
为了咯咯笑。免责声明:我对任何事情都不负责。不要用这个
编辑:在看了角度剑道问题跟踪器之后,看起来他们打算做类似的事情(从a判断),所以这可能不是完全错误的;我更新了演示,使其更具可读性我并不热衷于此解决方案,但我认为这是目前进行绑定的最佳方式。解决方案是使用kendo.data.observatarray或kendo.data.DataSource来支持数据网格,然后在控制器中更新observatarray或DataSource:
angular.module('MyApp').controller('MyController', function($scope, $http) {
$scope.products = new kendo.data.DataSource({
data: [], // kendo watches this array
pageSize: 5
});
$http.get('data/products.json').then(function(result) {
// update the Kendo DataSource here.
$scope.products.data(result.data);
});
});
HTML如下所示:
<input ng-model="data[0].data[0]" />
scope.$watch(attrs.kDataSource, function (mew, old) {
if (mew !== old) {
element.data('$kendoDataSource', toDataSource(mew, type));
var role = element.data("role");
var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
var w = element.data("kendo" + widgetType);;
if (!w) {
w = kendo.widgetInstance(element, kendo.ui);
}
if (w && typeof w.setDataSource === "function") {
w.setDataSource(element.data('$kendoDataSource'));
}
}
}, true);
<div kendo-grid
k-data-source="products"
k-selectable="'row'"
k-columns='[{ "field": "ProductName", "title": "Name" },
{ "field": "Supplier.SupplierName", "title": "Supplier" },
{ "field": "Category.CategoryName", "title": "Category" }]'
k-sortable="true"
k-groupable="true"
k-filterable="true">
</div>
您是否正在使用Angular剑道UI?如果您有演示或代码示例,将非常有用did@AlexW--使用$watch
查看您的模型,并在回调中调用redraw
。您应该如何通过这种方式从网格中获取所有分页、排序等参数?