knockout.js - 在 Knockout.js 数据绑定上添加静态文本

Question

是否可以使用以下示例将静态文本添加到数据绑定：

<p data-bind="text:someProperty"></p>

我想添加如下静态文本：

<p data-bind="text:' + $' + someProperty"></p>

Answer 1

您不能将静态文本连同跨度标签和跨度上的数据绑定一起放在段落标签内吗？

<p>text: <span data-bind="[whatever]" /></p>

Answer 2

这是上面对伊姆兰评论的解释，这是一个很好的答案

您的text:表达式通常包含在 ko.utils.unwrapObservable 调用中：

ko.utils.unwrapObservable(someProperty)

但是当您使用更复杂的表达式时，隐式展开不起作用：

ko.utils.unwrapObservable(' + $' + someProperty) // won't find an observable; won't unwrap

所以你必须自己打开它：

' + $' + ko.utils.unwrapObservable(someProperty) // good

或者因为你知道它是一个可观察的，你可以简单地使用 Imran 的版本：

' + $' + someProperty() // good, if someProperty is definitely an observable

Answer 3

我来晚了，（并且是 Knockout 的新手），但这是我用来在可观察对象周围添加静态文本的另一个选项。就我而言，我想在从下拉列表中选择的值周围添加括号。

javascript

...
return function AppViewModel() {
    this.myOptionValues = ko.observableArray([
        { label: "Foo", value: "Bar" },
    ]);

    this.mySelectedValue = ko.observable();

    this.myValue = ko.computed(function () {
        return this.mySelectedValue() ? '(' + this.mySelectedValue().label + ')' : '';
    }, this);
};
...

html

<small data-bind="text: myValue"></small> // (Foo)

Answer 4

最好的办法是在 viewModel 中创建一个新的 Computed 并将文本绑定到它。计算出来的 concats 你需要的 observable 和静态文本。这就是它的样子

var myViewModel = {
   ...
   var self= this;
   self.myObservable = ko.observable('some value here');
   self.myComputed = ko.pureComputed(function(){
       return 'some text here' + self.myObservable() + 'you can use other text here';
   });
   ...
}

然后，在您的 HTML 中简单地使用计算的 observable。

<p data-bind="text: myComputed"></p>

如果你想要灵活性，你可以为计算的 obs 使用参数并将它们传递给 hmtl 绑定

self.myComputed2 = ko.pureComputed(function(param1) {
   return param1 + self.myObservable;
}

并在 html

<p data-bind="text: myComputed2("somestring")"></p>