Question

我有以下viewmodel，我尝试实现的是当用户单击按钮时，此子视图模型会更改并相应地更新UI。目前我的btnClicked方法已被调用，但UI未更新。这是我的vm

的一个例子

var model1 = {
  name : ko.observable('john')
};

var model2 = {
  name: ko.observable('jane')
};

var vm = function() {
  var self = this;
  self.model = model1;
  self.btnClicked = function() {
    console.log('clicked');
    self.model = model2;
  };
};

ko.applyBindings(vm);

和html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <span data-bind="text: model.name"></span>
  <button data-bind="click: btnClicked">Click me</button>
</body>
</html>

Answer 1

我在代码/ html中看到的第一个问题： model.name 的文本绑定绑定到不可观察的。虽然 model1 和 model2 的名称属性是可观察的，但对象本身却不是。因此，Knockout不能正确使用它。

另外，我不会说您为viewmodel的 self.model 属性赋值的方式是标准做法。我建议查看KnockoutJS教程网站;有很多很好的例子可以帮助你更好地理解那里的淘汰赛。

Answer 2

在您的VM中，self.model不是可观察的变量。以下是您可以做的正确工作

<body data-bind="with:model">
  <span data-bind="text:name"></span>
  <button data-bind="click: btnClicked">Click me</button>
</body>

var model1 = function () {
  var self = this;
  self.name = ko.observable('john');
};

var model2 = function () {
  var self = this;
  self.name = ko.observable('jane');
};

var vm = function() {
  var self = this;
  self.model = ko.observableArray([]);
  self.model(new model1);

  self.btnClicked = function() {
     self.model(new model2);
  };
};

ko.applyBindings(vm);

工作示例：http://jsfiddle.net/GSvnh/5145/

如何动态更改VM的可观察性

2 个答案: