Using Meteor's phenomenal autoform from aldeed.
I have a custom form using autoForm that has the autosave on.
{{#autoForm collection="people" id=formId type="update" class="update" doc=. autosave=true template="autoupdate"}}
I have created a custom input template, the relevant part of which looks like this:
<template name="afInputText_autoupdate">
<input type="text" value="{{this.value}}" {{atts}}/><span class="display-value">{{this.value}}</span>
</template>
The .display-value span is shown and the input is hidden by default (using css), and when clicked on the input is shown and the span is hidden.
Everything works as expected including the autosave feature except that the value in the .display-value span does not update automatically as I would expect.
I suspect there's something about the object used to create the form not being subscribed to the document in question. I don't have the understanding of the inner workings of Meteor yet to figure this out (I've tried).
Could someone kindly point me in the right direction to get that value to update?
Related
I have several instances of sergeyt:typeahead working in my webapp. However today I am building a table out of data from query. One of the columns needs to allow for possibly selecting from a collection or if the user wants to enter their own value.
This has worked for me in other parts. Now it appears that when using an {{#each}} statement in the html and when the typeahead is inside the {{#each}} that it does not receive the injecting.
I believe this may be due to the fact that inject is typically done on the rendered which is run before the {{#each}} has run and created the dom elements. And if that is the case how would I go about then placing the inject on these newly generated elements?
You should be able to create a sub template for each stop:
<template name='myApp'>
{{#each stops}}
{{> stop}}
{{/each}}
</template>
<template name="stop">
<input class="form-control typeahead" ...>
</template>
This way you can call typeahead.inject on each instance after it is rendered.
Template.stop.onRendered(function() {
Meteor.typeahead.inject();
});
I'm trying to pass an array to another template in Meteor.
Why? Because I would like to create a small template for each Bootstrap element, allowing me to reuse components much more easily.
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems=["item1", "item2"] }}
This does not seem to work unfortunately.
Any clue? Does what I'm doing even make sense? I'm new to Meteor.
Thanks!
Spacebars is currently pretty limited in what it can accept - you'll need to add a helper to accomplish this:
Template.myTemplate.helpers({
listItems: ['item1', 'item2']
});
And them modify your template:
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems="{{listItems}}"}}
Make sure to update myTemplate to the parent template's name.
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.
I have a template that contains a second template, I'd like to make the second template variable ie. it can change depending on what I pass as the template name.
<template name="template1">
<div>
{{> template2}}
</div>
</template>
So when my main page shows template1 I want to specify the template to use for template2.
<template name="main">
{{> template1 TemplateArgs }}
</template>
I know how to set up TemplateArgs - it would contain the name of the template I want to use for template2.
Is this possible?
A future version of meteor allows this with the new Meteor UI functionality. Currently you need to do this manually in a different way. See Meteor set overall template context.
Meteor UI
Beware meteor UI is still in a betaish and is a bit buggy. More details on the post in the references
If you use meteor UI (which you can use in preview mode with)
meteor --release template-engine-preview-5
Then you can do stuff like this
Template.main.template1 = function (value2) {
return Template["template2"].withData({foo: "bar", value2: value2}));
}
Then html like
{{>template1 "valueofvalue2"}}
Current Version / Spark rendering
There is a way in the current version of meteor but it wont work with the UI release since Meteor.render will be phased out in favour of using DOM objects
Template.main.template1 = function(value2) {
return Meteor.render(Template.template2({foo: "bar", value2: value2});
}
Then something like this in your html. You might have to play around with the data to get it working but its something like this
{{template1 "value2"}}
References:
https://groups.google.com/forum/#!topic/meteor-core/gHSSlyxifec
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
http://www.youtube.com/watch?v=aPf0LMQHIqk
I am new to meteor.. I am looking for a way to perform 2 way databinding between a model/collection to template. It is my understanding that when the contents of a collection change, the template reacts to this change and updates itself. However, how to automatically the collection when a user types, for example, in a textbox?
You could use the template events binding
e.g if you have
html
<template name="home">
<input type="text" name="text" value="{{text}}"/>
</template>
client js
Template.home.text = function() {
return MyCollection.findOne({_id:"1"}).text;
}
Template.home.events({
'change input[name=text]':function(event,context) {
MyCollection.update(_id, {$set:{text:event.target.value}});
}
});
So that will make it update as soon as the textbox loses focus/enter is pressed/etc
If you want to use the submit button & for something a bit cooler have a look at the controllers branch of meteor on github for the
easy forms system currently in the works to easen this up a bit.