с помощью учебника по нокауту на сайте js - как вводить fullName в верхнем регистре (вместо lastName)?

Question

Я просто убиваю время и пачкаю руки каким-нибудь knockout.js.Я никогда не подходил к нему раньше, поэтому я решил посмотреть, что это такое.

На официальном сайте - http://learn.knockoutjs.com, Я изменил код на шаге 4/ 5, так что вместо того, чтобы кнопка превращала значение lastName в верхний регистр при нажатии кнопки, ОБА firstName и lastName объединяются в переменную с именем fullName, и представление обновляется, чтобы показать 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

Привет, вам нужно только обновить переменные 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>

Answer 2

Значение Вычисляемые наблюдаемые вычисляется на основе других наблюдаемых.Вам не нужно вручную устанавливать их значение, например this.fullName(currentVal.toUpperCase()).Просто переместите заглавную логику внутрь ko.computed.Теперь, каждый раз, когда вы меняете firstName или lastName, fullName будет автоматически вычисляться

// 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>