如何结合knockout数据绑定:文本与硬编码字符串?

SLI*_*SLI 5 html knockout.js

我想将淘汰赛data-bind: text与硬编码文本结合起来,如下例所示:

<h6 data-bind="text: username + 'are now logged in'"></h6>
Run Code Online (Sandbox Code Playgroud)

我尝试了几种不同的加号和分号等,但无法使其正常工作.

Jer*_*oen 8

您需要执行observable来获取它们的值:

ko.applyBindings({ username: ko.observable("johndoe") });
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h6 data-bind="text: username() + 'are now logged in'"></h6>
Run Code Online (Sandbox Code Playgroud)

更好的是使用(纯)Computed observable,你可以单元测试:

function ViewModel() {
  var self = this;
  self.username = ko.observable("johndoe");
  self.loggedInMessage = ko.pureComputed(function(){
    return self.username() + " is now logged in";
  });
}

ko.applyBindings(new ViewModel());
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h6 data-bind="text: loggedInMessage"></h6>
Run Code Online (Sandbox Code Playgroud)