Добавить статический текст для привязки данных Knockout.js

Ответ 1

Не можете ли вы поставить статический текст внутри тега абзаца вместе с тегом span и привязкой данных к диапазону?

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

Ответ 2

Здесь объяснение комментария Imran выше, что является хорошим ответом

Ваше выражение 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

Ответ 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)

Ответ 4

Лучше всего было бы создать новый Computed внутри viewModel и связать текст с этим. Вычисляемый конкат наблюдаемый вам и статический текст. Это будет выглядеть как

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 просто используйте вычисленный наблюдаемый.

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

Если вам нужна гибкость, вы можете использовать параметры для вычисленного obs и передать их в hmtl bind

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

И в html

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