使用敲除js网站教程-如何大写fullName（而不是lastName）？

Question

我只是在花些时间，并用一些基因敲除（snockout.js）使我的手变脏。我以前从没走过它，所以我想我要看看它的全部。

在官方网站上-http://learn.knockoutjs.com，我已经在步骤4/5上修改了代码，以便在单击按钮时将按钮的lastName值变为大写，而不是按钮，将firstName和lastName都组合为名为fullName的变量并更新视图以全显示全名。

关于我在这里做错什么的任何想法？我只是试图聚合/合并firstName和lastName的值，并将它们存储在一个名为currentVal的变量中，该变量在视图中被分配为值fullName。当我单击按钮时，什么都没有发生，呵呵

这是我的代码（在第4/5步的教程中进行了修改，请查看您是否可以告诉我我在哪里做错了。

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);

  this.capitalizeLastName = function() {
    this.fullName = this.firstName() + " " + this.lastName(); //with or without this line, it doesn't update fullName to uppercase :-|
    var currentVal = this.fullName();
    this.fullName(currentVal.toUpperCase());
  };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full Name: <input data-bind="value: fullName" /></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName"> Go caps</button>

Answer 1

Computed Observables的值是根据其他可观察值计算得出的。您不必像this.fullName(currentVal.toUpperCase())那样手动设置它们的值。只需将大写逻辑移到ko.computed内即可。现在，每次更改firstName或lastName时，fullName都会再次自动获得computed

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName().toUpperCase() + " " + this.lastName().toUpperCase();
  }, this);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full Name: <input data-bind="value: fullName" /></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>

Answer 2

您好，您只需要更新firstName和lastName，因为fullName是返回这些值的计算函数，例如：

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);

  this.capitalizeFullName = function() {
   this.lastName(this.lastName().toUpperCase());     
   this.firstName(this.firstName().toUpperCase());     
  };
}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full Name: <input data-bind="value: fullName" /></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeFullName"> Go caps</button>