改变viewmodel函数的observablearray值

Changing observablearray value from viewmodel function

本文关键字：observablearray 函数 viewmodel 改变      更新时间：2023-09-26

我的视图模型中有一个函数，它应该将我的数组中的启用值从false更改为true。

  editclick: function (user) {
     user.enabled = true;
     return true;
  }

如果我放一个警告来显示更改

user.enabled = true;
alert(ko.toJSON(user));

它显示它确实改变了，但绑定值没有改变。

如果我在更改前放一个警告

alert(ko.toJSON(user));
user.enabled = true;

第二次单击按钮时，警报确实显示值已更改。

这是我的jsFiddle以及我使用的代码。

(JS) 

var myViewModel = {
  myarray: ko.observableArray([{
     myname: 'Bob',
     mysurname: 'Smith',
     enabled: false
  }, {
     myname: 'John',
     mysurname: 'Smith',
     enabled: false
  }]),
  editclick: function (user) {
     user.enabled = true;
     alert(ko.toJSON(user));
     return true;
  }
};
(代码)

<Table border="1" cellpadding="5" cellspacing="0">
 <thead>
    <tr>
        <td>Button</td>
        <td>Value</td>
    </tr>
 </thead>
 <tbody data-bind="foreach: myarray">
    <tr>
        <td>
            <input type="button" value="Change" data-bind="click: $root.editclick" />
        </td>
        <td><span data-bind="text: enabled" />
        </td>
    </tr>
 </tbody>
</Table>

似乎更改没有更新视图模型。有没有办法使它工作。

谢谢

ko.observableArray只跟踪项目的添加或删除。

因此，为了KO跟踪项目内部的变化并自动更新UI，您需要设置属性ko.observable:

myarray: ko.observableArray([{
         myname: 'Bob',
         mysurname: 'Smith',
         enabled: ko.observable(false)
     }, {
         myname: 'John',
         mysurname: 'Smith',
         enabled: ko.observable(false)
     }])

和在您的editclick中，您需要设置enabled: user.enabled(true);(因为ko.observable返回一个函数)

editclick: function (user) {
         user.enabled(true);
         alert(ko.toJSON(user));
         return true;
     }

演示JSFiddle。

相关文章：