在按钮单击事件上绑定dxSelectBox

到最后

我使用的是DevExtreme MVVM体系结构,根据我的情况,当按钮单击事件发生时,我需要绑定dxSelectBox(组合框)。

HTML代码:

<div data-bind="dxButton:{onClick:display,text:'Click Me'}"></div>

<div data-bind="dxSelectBox:{dataSource: themes, displayExpr: 'name' }"></div>

JS代码:

var themesArray = [
        { themeId: 1, name: "Android (Dunkel)" },
        { themeId: 2, name: "Desktop" },
        { themeId: 3, name: "iOS" },
        { themeId: 4, name: "Windows 8" },
        { themeId: 5, name: "Windows Phone 8" },
        { themeId: 6, name: "Tizen" }
];

var themes = new DevExpress.data.DataSource(themesArray);

var viewModel = {
    themes: '',
    display: function () {
        console.log(themesArray);
        themes: themesArray
    }
};
return viewModel;

提示:dxSelectBox具有空值...我是这个环境的新手,我不知道自己在哪里出错。

硅通孔

恐怕您忘记设置“值”选项,例如:

data-bind="dxSelectBox: { dataSource: [ { val: true, text: 'Yes' }, { val: false, text: 'No' }], valueExpr: 'val', displayExpr: 'text', value: visible }"

针对您的情况:

var viewModel = {
themes: [ ...array of themes... ],
selectedThemeId: 1,
display: function () {
    console.log(themesArray);
    themes: themesArray
}
};

data-bind="dxSelectBox: { dataSource: themes, valueExpr: 'themeId', displayExpr: 'name', value: selectedThemeId }"

我厌倦了以下代码:

 var themesArray = [
        { themeId: 1, name: "Android (Dunkel)" },
        { themeId: 2, name: "Desktop" },
        { themeId: 3, name: "iOS" },
        { themeId: 4, name: "Windows 8" },
        { themeId: 5, name: "Windows Phone 8" },
        { themeId: 6, name: "Tizen" }
   ];

  var modifiedthemesArray = [
      { themeId: 1, name: "a (Dunkel)" },
      { themeId: 2, name: "b" },
      { themeId: 3, name: "c" },
      { themeId: 4, name: "Windows 8" },
      { themeId: 5, name: "Windows Phone 8" },
      { themeId: 6, name: "Tizen" }
  ];

  var themes = new DevExpress.data.DataSource(themesArray);

  var viewModel = {
    themes: themesArray,
    selectedThemeId: 1,
    display: function (e) {
        console.log(e);
        themes: modifiedthemesArray
    }
 };
  return viewModel;

您可以使用observableArray更改集合对象。我厌倦了以下代码,它对我有用:

 var themesArray = [
    { themeId: 1, name: "Android (Dunkel)" },
    { themeId: 2, name: "Desktop" },
    { themeId: 3, name: "iOS" },
    { themeId: 4, name: "Windows 8" },
    { themeId: 5, name: "Windows Phone 8" },
    { themeId: 6, name: "Tizen" }
    ];

    var viewModel = {
        themes: ko.observableArray(),
        display: function() {
            console.log(themesArray);
            viewModel.themes(themesArray);
        }
    };

    return viewModel;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用C#在按钮单击事件上的textBox中设置光标位置?

来自分类Dev

在按钮上单击多个ListView

来自分类Dev

如何在按钮单击事件中停止服务

来自分类Dev

在按钮单击事件上关闭模式对话框

来自分类Dev

在按钮上单击选择tableViewCell

来自分类Dev

javafx如何在按钮单击事件上扩展整个treeItem?

来自分类Dev

在按钮上单击列表中的绑定网格视图

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

使用智能表在按钮的单击事件上搜索数据

来自分类Dev

如何在按钮单击事件中隐藏占位符?

来自分类Dev

在按钮单击事件上初始化AMCharts

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

在按钮上单击添加图像到按钮

来自分类Dev

在按钮上单击,页面无用

来自分类Dev

为什么我需要在按钮上单击两次以使事件发生?

来自分类Dev

将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

来自分类Dev

在按钮单击事件中从tablelayout获取值时出错

来自分类Dev

在按钮上显示div单击

来自分类Dev

javafx如何在按钮单击事件上扩展整个treeItem?

来自分类Dev

在wicket中动态添加文本字段并在按钮单击事件上的表单中下拉。

来自分类Dev

jQuery Mobile在按钮单击事件上显示本机选择菜单

来自分类Dev

访问在按钮外部单击事件上创建的标签

来自分类Dev

如何立即将隐藏的div保持在按钮单击事件上,因为它立即消失

来自分类Dev

在按钮上单击隐藏键盘

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

wxpython如何在按钮上设置绑定事件,该事件在单击其他按钮后会启用

来自分类Dev

如何将事件绑定到功能区按钮上单击wxpython-phoenix

来自分类Dev

使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

来自分类Dev

如何在 angular2 中使我在按钮上的 longpress 指令不触发单击或路由器事件?

Related 相关文章

  1. 1

    如何使用C#在按钮单击事件上的textBox中设置光标位置?

  2. 2

    在按钮上单击多个ListView

  3. 3

    如何在按钮单击事件中停止服务

  4. 4

    在按钮单击事件上关闭模式对话框

  5. 5

    在按钮上单击选择tableViewCell

  6. 6

    javafx如何在按钮单击事件上扩展整个treeItem?

  7. 7

    在按钮上单击列表中的绑定网格视图

  8. 8

    在按钮单击事件上绑定dxSelectBox

  9. 9

    使用智能表在按钮的单击事件上搜索数据

  10. 10

    如何在按钮单击事件中隐藏占位符?

  11. 11

    在按钮单击事件上初始化AMCharts

  12. 12

    UIAlertController在按钮上单击

  13. 13

    在按钮上单击添加图像到按钮

  14. 14

    在按钮上单击,页面无用

  15. 15

    为什么我需要在按钮上单击两次以使事件发生?

  16. 16

    将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

  17. 17

    在按钮单击事件中从tablelayout获取值时出错

  18. 18

    在按钮上显示div单击

  19. 19

    javafx如何在按钮单击事件上扩展整个treeItem?

  20. 20

    在wicket中动态添加文本字段并在按钮单击事件上的表单中下拉。

  21. 21

    jQuery Mobile在按钮单击事件上显示本机选择菜单

  22. 22

    访问在按钮外部单击事件上创建的标签

  23. 23

    如何立即将隐藏的div保持在按钮单击事件上,因为它立即消失

  24. 24

    在按钮上单击隐藏键盘

  25. 25

    UIAlertController在按钮上单击

  26. 26

    wxpython如何在按钮上设置绑定事件,该事件在单击其他按钮后会启用

  27. 27

    如何将事件绑定到功能区按钮上单击wxpython-phoenix

  28. 28

    使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

  29. 29

    如何在 angular2 中使我在按钮上的 longpress 指令不触发单击或路由器事件?

热门标签

归档