使用 knockout js 网站教程 - 如何将全名大写(而不仅仅是姓氏)?
using the knockout js website tutorial - how to uppercase fullName (instead of just lastName)?
我只是在打发时间,弄脏我的手 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>
您好,您只需要更新 firstName
和 lastName
变量,因为 fullName
它是一个 return 这些值的计算函数,如下所示:
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>
我只是在打发时间,弄脏我的手 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>
您好,您只需要更新 firstName
和 lastName
变量,因为 fullName
它是一个 return 这些值的计算函数,如下所示:
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>