what would be the best way to aproach this in knockoutjs?
I want to replace the data-bind="text: Order" with an image based on what is returned. Examples of what ive tried are in the code below. First example works ok but just returns text (ASC or DESC). 2nd example just returns both. Third example works but I need to display the object as html. Thanks.
<div class="col-md-3 sort-order">
<!--<div class="col-md-3 sort-field" data-bind="text: Order"></div>-->
<!-- ko if: Order() === 'ASC' -->
<object data='~/Content/svg/plans/order-down.svg' type='image/svg+xml' />
<!-- /ko -->
<!-- ko if: Order() === 'DESC' -->
<object data='~/Content/svg/plans/order-up.svg' type='image/svg+xml' />
<!-- /ko -->
</div>
<!--<div class="col-md-3 sort-order" data-bind="text: (ko.unwrap(Order) == 'ASC') ?'<object data='~/Content/svg/plans/order-down.svg' type='image/svg+xml' />' : '<object data='~/Content/svg/plans/order-up.svg' type='image/svg+xml' />'">
</div>-->
In your code instead of using the text binding use like this:
data-bind="html:'your html part goes here'"
Related
I want to show a HTML paragraph based on a condition. This is working when I have only one. But, is now working when I use || operand.
Any help would be appreciated.
New to js - forgive if I am missing something.
<!-- ko if: $root.valueA || $root.valueB -->
<p>
Show this message.
</p>
<!-- /ko -->
Assuming valueA and valueB are observables, you need to manually unwrap them:
<!-- ko if: $root.valueA() || $root.valueB() -->
I display some text in a <span> element which looks like this
<span data-bind="text: $root.participants()[_propkey].Currency"></span>
When root.participants()[_propkey].Currency is null, I get an empty space on page.
How do I prevent this span from getting created if root.participants()[_propkey].Currency is null
you can use virtual elements and the if binding to achieve what you're after
var vm = {
Currency : ko.observable()
};
ko.applyBindings(vm);
span {background-color: cornflowerblue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
Currency span
<!-- ko if: Currency -->
<span data-bind="text: Currency"></span>
<!-- /ko -->
is here
<br />
Test: <input data-bind="textInput: Currency">
Using knockout JS, how can I apply a conditional with binding to HTML?
I have two observables, either one should be used based on a condition for the same html code. I want to do something like this:
if some-condition:
<div data-bind="with: observable1">
else:
<div data-bind="with: observable2">
<!-- the below is common code -->
<label data-bind: "text: observable-property"></label>
<!-- .... -->
</div>
<div data-bind="with: var1() ? var2 : var3">
<div data-bind="text: a">
</div>
</div>
You can bind an observable conditionally to the with binding like this.
See this fiddle for a demo.
You could use comment tags:
<!-- ko if: foo -->
<div data-bind="with: bar"></div>
<!-- /ko -->
<!-- ko ifnot: foo -->
<div data-bind="with: baz"></div>
<!-- /ko -->
Depending on the outcome of an expression in my text data-binding,
I would like to display a property or some HTML code.
This is the expression:
resultsCount().length > 0 ? resultsCount().length : {html: loadingIcon}
And it's being used in the following context:
<span data-bind="text: resultsCount().length > 0 ? resultsCount().length : {html: loadingIcon}"></span></strong></p>
This obviously doesn't work (because of {html: loadingIcon}), but I'd like to know how I can make this work.
The loadingIcon HTML is a simple HTML structure like this:
self.loadingIcon = "<div class='loadingIconWrapper'><i class='glyphicon glyphicon-refresh'></i></div>";
How can I achieve this? Thanks in advance.
You can use just html binding to achieve result.
<span data-bind="html: resultsCount().length > 0 ? resultsCount().length :loadingIcon"></span>
Fiddle demo
Or if you don't want to use html binding for displaying number then use if binding.
<!-- ko if: resultsCount().length> 0 -->
<span data-bind="text:resultsCount().length"></span>
<!-- /ko -->
<!-- ko ifnot: resultsCount().length> 0 -->
<span data-bind="html:loadingIcon"></span>
<!-- /ko -->
Fiddle demo
I gave an alias for each data of the Knockout's foreach so I can call it inside another nested foreach.
Now I want to get the index of the alias. I tried '.index()' and '.$index' but no use.
<!-- ko foreach: {data: subjects, as: 'subject' }-->
/*nested foreach*/
subject.index() <-- undefined
<!-- /ko-->
Please help, thanks
You can use standart javascript function Array.indexOf()
<!-- ko foreach: {data: subjects, as: 'subject' }-->
/*nested foreach*/
<span data-bind="text: subjects.indexOf(subject)"></span>
<!-- /ko-->
$index context value is possible to use only for non-virtual for-each, e.g.
<ul data-bind="foreach: categories">
<span data-bind="text: $index"></span>
</ul>