javascript - 如何使用 ko.compulated (Knockout.js) 更正绑定(bind)属性

Question

我使用 Knockout.js 并遇到这个问题。问题是属性“newString”在页面上查看不正确的数据:“无图像”。我想看到另一个字符串:“image1”。帮我解决这个问题。

var viewModel = {
  new_property_first: ko.observable('image1'),
  new_property_second: ko.observable('image2'),

  newString: ko.computed(function() {
    if (this.new_property_first == 'image1') {
      return 'image1';
    } else if (this.new_property_second == 'image2') {
      return 'image2';
    } else {
      return 'no_image';
    }
  }, this),
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p data-bind="text: newString"></p>

Answer 1

这里的第一个问题是你不能在对象文字上使用 this ，你必须使用 function declaration 。另外，您无法访问observable直接值，你必须像这样“调用”它们:

function ViewModel() {
  this.new_property_first = ko.observable('image1');
  this.new_property_second = ko.observable('image2');
  
  this.newString = ko.computed(function() {
    if (this.new_property_first() == 'image1') {
      return 'image1';
    } else if (this.new_property_second() == 'image2') {
      return 'image2';
    } else {
      return 'no_image';
    }
  }, this);
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p data-bind="text: newString"></p>

否则，如果您想保留对象字面量，您可以在对象声明之外声明您的计算:

var viewModel = {
  new_property_first: ko.observable('image1'),
  new_property_second: ko.observable('image2')
}

viewModel.newString = ko.computed(function() {
  if (this.new_property_first() == 'image1') {
    return 'image1';
  } else if (this.new_property_second() == 'image2') {
    return 'image2';
  } else {
    return 'no_image';
  }
}, viewModel)

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p data-bind="text: newString"></p>