在按鈕單擊事件上綁定dxSelectBox

Question

我使用的是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具有空值...我是這個環境的新手，我不知道自己在哪里犯錯。

Answer 1

恐怕您忘記設置“值”選項，例如：

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;