【问题标题】:Angular - kendo data bindingAngular - 剑道数据绑定
【发布时间】:2014-10-05 14:52:42
【问题描述】:

我正在使用剑道网格并且有一个带有以下模板的复选框列:

"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"

此外,我还使用 observableArray 作为网格的数据源。 单击 chekcbox 时,observableArray 中的数据按预期更改,但不会触发“更改”事件。 这是我定义 observableArray 的方式:

var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
     data: obsArray
 });
 obsArray.bind("change", function (e) {
     console.log(e.action, e.field);
 });

“scope.gridData”是原始数据模型。当我单击复选框时,observableArray 已更改,但“scope.gridData”未更改。为了更改“scope.gridData”,我想监听“change”事件并手动更改“scope.gridData”,但正如我所说,“change”事件没有被触发。

关于我做错了什么的任何建议,也许有更好的解决方案。

【问题讨论】:

    标签: angularjs data-binding kendo-ui kendo-grid angular-kendo


    【解决方案1】:

    Read This

    您的问题是 kendo 使用了您的范围对象的副本

    【讨论】:

      【解决方案2】:

      我在我的输入复选框中手动添加了一个事件(在我们的课程中,我们使用 Angular,所以它在 ng-click="doSomething()" 但也许你的只是 click="doSomething" 并记录了处理布尔更改手动。

      我们也有 Kendo Observables - 但我很幸运,因为我们还使用 Breeze JS 的东西,我们可以在其中进行数据检测并在数据向后传播到要设置的正确位置时刷新网格肮脏的。 (grid.dataSource.read();)

      如果您想要完整的行值,请单击=“doSomething(this)”,然后将其捕获为发件人。只需调试,您应该将 dataItem 附加到 Sender。

      【讨论】:

      • 如果您发现另一个方向的绑定,请告诉我 - 我无法在网格首次出现时选中复选框...
      【解决方案3】:

      这可能对您有所帮助,这不是正确的数字,但我做了一个与您的问题类似的示例

       var contentData = [
            { organization: 'Nihilent', os: 'Window' }
          ];
      
          var nihl = contentData[0];
      
          var viewModel = kendo.observable({
            gridSource: new kendo.contentData.DataSource({
              contentData: contentData
            })
          });
      
          kendo.bind($(document.body), viewModel);
      
          contentData.push({ organization: 'Dhuaan', os: 'Android' });
      
          nihl.set('os', 'iOS');
      

      【讨论】:

        猜你喜欢
        • 2020-01-23
        • 2020-07-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-01-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多