I need to add a datepicker to a textbox input, whose visibility is controlled by a knockoutjs binding.
<!-- ko if: hasWorked -->
<div class="form-group">
<input id="StartDate" name="StartDate" type="text" />
</div>
<!-- /ko -->
My guess is:
<!-- ko if: hasWorked, afterRender:initDatepicker -->
But it never worked.
What is the correct way to show a textbox and then run a function to process it?
afterRender is only available to foreach and template.
Luckily, we can do containerless template.
So the solution:
<!-- ko template: {if: hasWorked,afterRender:initDatepicker} -->
...
<!-- /ko -->
References:
Containerless template The solution provided by Maksym
Kozlenko. Not the selected answer.
The use of afterRender in template, see the knockout official documentation on template, (scroll down to Note 4).
Related
I'm trying to use chosen on some form elements that are in various templates throughout a meteor app. For example:
HTML
<template name="personSettings">
<!-- some code -->
<template name="chosenSelect">
<select class="chosen">
<!-- options -->
</select>
</template>
<!-- some code -->
</template>
JS
Template.chosenSelect.rendered = function() {
$('.chosen').chosen()
}
Note that the JS at this point is irrelevant, because I get the error:
While building the application:
client/views/personSettings.html:27: Expected "template" end tag
... </select>
I thought you could nest templates, so I'm not sure what the problem is. However, if it turns out I cannot nest templates, the question remains:
What is the best way to initiaize a jquery plugin on a DOM element (by class), that exists in multiple templates?
You can indeed nest templates but your syntax is wrong :
HTML
<template name="chosenSelect">
<select class="chosen">
<!-- options -->
</select>
</template>
<template name="personSettings">
<!-- some code -->
{{> chosenSelect}}
<!-- some code -->
</template>
You must always declare templates within a single pair of matching template tags, if you need to call another template from within your template markup, use the template invokation / inclusion syntax {{> myTemplate}}.
JS
Template.chosenSelect.onRendered(function() {
this.$(".chosen").chosen()
});
When it comes to initializng jQuery plugins within template instances, use the onRendered lifecycle event and prefer using scoped jQuery object (this.$).
This containerless with binding doesn't set the bindingContext as I would expect; it's still set to the containing parent of ladder.
<!-- ko with:ladder -->
<table>
//Context here is the $root object, not $root.ladder
//some foreach binding here
</table>
Add 4 pages
<!-- /ko -->
This containerful method works fine though.
<table class="ladder-table" data-bind="with:ladder">
//the context is correctly set to ladder in this instance
//some foreach binding here
</table>
<br />
Add 4 pages
Anyone know what's up with that? Google didn't give any results.
The problem is with Durandal, not Knockout, as this answer explains:
containerless statements of knockoutjs is not working in hottowel SPA?
In short, Durandal allows only one root element per view.
goodView.html
<div>
<--ko foreach:stuff-->
//stuff
<--/ko-->
</div>
badView.html
<div>
<stuff/>
</div>
<--ko foreach:stuff--> //these elements are stripped out
//stuff
<--/ko-->
Thanks #nemesv
Take a look at the following code, with a focus on the embedded script:
<tr>
<!-- ko foreach: { data: foos, as: 'f' } -->
<td>
<!-- ko if: f.someCondition() -->
<input id='picker' />
<script type="text/javascript">
$("#picker").kendoDatePicker({
value: new Date(),
change: f.changeFunction }); <!---- note this line -->
</script>
<!-- /ko -->
</td>
<!-- /ko -->
</tr>
See f.changeFunction? I'm getting a JavaScript error that f is not defined. How do I access the current binding context so I can attach the Kendo change handler to my current foo? I've tried using a few of the binding context variables but they aren't accessible outside of the binding expressions. If I can't access the binding context in the embedded script, is there a workaround?
Is there a reason you aren't using the kendo-knockout bindings?
http://rniemeyer.github.io/knockout-kendo/web/DatePicker.html
I am displaying a list of items and if the items are not available I have to display a default message. Now, I have to check whether the object has been created and then check the object has the list in it.
So now, I am doing the below and it works it creates unnecessary dom elements. But, when I do the same with the containerless binding it doesn't seem to work and also is there an && syntax for if in KO
<span data-bind="if: object">
<span data-bind="if: !object().property">
<p> The list is not available </p>
</span>
</span> // Works
<!-- ko if: object -->
<!-- ko if: !object().property -->
<p> The list is not available </p>
<!-- /ko -->
<!-- /ko --> // Doesn't work
Thanks
As mentioned by CodeThug, using the solutions you provided would display the message until ko.applyBindings have finished. A more verbose solution, but that would avoid the problem without relying on CSS, is to use dynamic templates as shown in the following jsfiddle:
http://jsfiddle.net/sAkb4/1/
This will create the valid markup inside the virtual element only when the ko.applyBindings is done.
<!-- ko template: { name: dinamycList } -->
<!-- /ko -->
<script type="text/html" id="empty-template">
... list is NOT available markup ...
</script>
<script type="text/html" id="list-template">
... list is available markup ...
</script>
Being dinamycList a function that returns the name of the template according to the verifications you want for a valid list.
EDIT:
Reading thru your last comment made me think if the behaviour that you want is to display the "not avaiable template" only after calculating the list and the property is false, if thats the case, the following fiddle will fix the last one to provide the right condition.
http://jsfiddle.net/sAkb4/3/
The "if" condition in template will handle the moment after knockout is ready, but before the list is. If the condition gets too messy, i would advise to put it inside a ko.computed for a clear markup.
<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } -->
<!-- /ko -->
As you have seen, the element exists in the DOM, and it won't be removed until the ko.applyBindings call is finished. Thus the momentary display of this message.
I'd try hiding the entire section of the DOM and show a loading indicator instead. When ko/ajax is done, the loading indicator can then be removed and the markup you care about displayed.
Alternately, you could see if your page is taking a while to load and try to improve the load time of the page. The chrome profiling tools can help with this.
THis is very easy with my Convention over configuration lib
http://jsfiddle.net/VVb4P/
Just this and the lib will do the templatating for you
this.items.subscribe(function(items) {
if(items.length === 0) {
this.items.push(new MyApp.EmptyViewModel());
}
}, this);
How to perform following operation in knockout
<div id="mainlist" data-bind="foreach: PageData.messages">
<article class="comment_chain" id="_parentpost" >
<div class="post_holder">
<!-- ko if: ObjectId === 4 -->
DO SOMETHING
<!-- /ko -->
</div>
here if condetion is no getting called properly . wat may b the reason for this.
Is ObjectId an observable? If so when you use an observable in an expression you have to remember that it is really a function and you need to use the () form to get the underlying value. Try this:
<!-- ko if: ObjectId() === 4 -->