Hi I am trying to bind to an item within an object in knockout:
the following line does not work
<span data-bind="text:selectedItem.details"></span>
I tried changing it to have parenthesis after selecteItem:
<span data-bind="text:selectedItem().details"></span>
, it still did not work.
Using with:, however works:
<div data-bind="with:selectedItem">
<span data-bind="text:details" />
</div>
What am I doing wrong? How does one use composite binding paths in Knockout.
Thanks
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I have an observable array of items which are made draggable/droppable using the Knockout sortable plugin. I am able to apply a custom template binding on the elements as per the doc using following piece of code.
<div style="border-width:0;" data-bind="sortable: {template: 'customTemplate', data: observableArray}">
My requirement is to use different templates for different items in the array based on certain condition applied to the item property. For example, if we have a property called 'status' for each item in the observable array, I want to bind 'template1' if status is true else 'template2'.
I am able to achieve the same for arrays which can be traversed using foreach loop in ko, but unable to do the same for sortable array since it does not allow to use foreach. Can someone suggest a solution/workaround to the same?
UPDATE: I was able to apply custom binding in the same template based on condition but it lead to a strange error where the element gets cloned in the parent container while dragging and dropping it into a target container. Demo can be seen here: jsFiddle
I have applied different style to students based on name but on dropping the student to a table, it gets cloned in the parent table as well. What can be the possible issue?
Note: I do not want to bind conditional css to my elements, I want to differentiate the way elements render, based on condition. Example - Going by the table seating example, if I have properties name, age and class for students object, I just want to show name for few students while all 3 properties for some as can be seen in the example fiddle.
we can fix the issue using conditional css binding
View :
<script type="text/html" id="customTmpl">
<div data-bind="css:{'one': name() === 'Bobby' ? true : false ,'two': name() != 'Bobby' ? true : false } ">
<p data-bind="text: name"></p>
</div>
</script>
Instead of going for a conditional containerless if we can simply avoid it and do it with conditional css binding .
Working fiddler here
Documentation on css available here
I was finally able to make it work by adding conditional knockout code in a single template and separating the template div from the sortable div as can be seen in the fiddle here.
The conditional script was written as below:
<script type="text/html" id="customTmpl">
<!-- ko if: name() == 'Bobby' -->
<div style="background-color: red; margin:4px;">
<p data-bind="text: name"></p>
<p data-bind="text: gender"></p>
</div>
<!-- /ko -->
<!-- ko if:name() != 'Bobby' -->
<div style="background-color: yellow; margin:4px;">
<p data-bind="text: name"></p>
</div>
<!-- /ko -->
The sortable and the template divs were separated as:
<div class="seats" data-bind="sortable: {data: students, allowDrop: $root.isTableFull }">
<div style="padding:0; border-width:0" data-bind="template:'customTmpl'"></div>
</div>
Hope it helps :)
Property binding is working fine if I have an input in my template
<div id="textAreaDiv"><input type="text" value={{item.mainText}}></div>
but I would like to have an editable div
<div id="textAreaDiv" contenteditable="true">{{item.mainText}}</div>
Is that possible? Can't find anything in the documentation.
Seems not to be supported. You should file a bug/feature request.
https://code.google.com/p/dart/issues/list
I´m working on a MVC3 project.
I already have a decimal value into a ViewData["nReceived"] calculated in the controller. After that the controller calls to Index view.
I'm able to display it on Index view outside of a element
<div class="bar bar-success" style="width: 42%;">Received #ViewData["nReceived"]</div>
but I need to use this value as a property of element replacing the width percentage.
I tried this with no success:
<div class="bar bar-success" style="width: #ViewData["nReceived"]%;">Received</div>
and also this:
#ViewContext.Writer
.Write("<div class=\"bar bar-success\" style=\"width: #ViewData["nReceived"]%;">")
Any ideas on how to get it working?
This should work use #()
<div class="bar bar-success" style="width:#(ViewData["nReceived"])%;">Received</div>
Also Since you are using MVC3, you can try ViewBag as well
<div class="bar bar-success" style="width:#(ViewBag.nReceived)%;">Received</div>
style='width: #Html.Raw(ViewData["nReceived"])' you're breaking your quotes and you need this to render out a little differently here
In my application i use twitter bootstrap to add nice icons to buttons etc. With normal buttons and links i can achieve this by doing..
<g:remoteLink .. code omitted .. class="btn">
<i class="icon icon-warning-sign"></i> <g:message code="default.button.add.label"/>
</g:remoteLink>
This results in a nice button with a icon in front of the text..
Now i want to use a submitToRemote:
<g:submitToRemote .. code omitted .. value="${message(code: 'default.button.add.label')}" class="btn"/>
But i seem to fail in adding the
<i class="icon icon-warning-sign"></i>
to the value.. any hints or tips on how to achieve this?
I tried several things like putting this style in the class attribute but this also fails.
Any hints?
submitToRemote generates an <input type="sbumit" ... /> tag (source code), which does not easily lend itself to what you're hoping to do (value is expected to be a plain string, not markup).
One alternative might be to use formRemote instead of submitToRemote, along with a <button> that includes your icon markup:
<g:formRemote action="..." update="...">
...
<button type="submit" ...><i class="icon icon-warning-sign"></i> Text...</button>
</g:formRemote>