I had to disable the plugin in Froala. I am trying to use the character count option to allow displaying the data I require. My code looks like this so far.
Template.hello.helpers ({
'counter': function(){
return $('div#froala-editor').froalaEditor('charCounter.count');
}
});
On the client side I refer to the helper like so:
<template name="hello">
{{counter}}
</template>
I know for a fact that "$('div#froala-editor').froalaEditor('charCounter.count')" works because I attached it to an event (button click) and was able to display the count in the console.
How do I go about displaying this data in my template?
Related
On a single page, I'd like to display a list of editors and grouped under each editor, the list of books from this editor. Each editor have many books, and I've many editors, and the editors must be ordered using a score derived by the books associated to this editor. E.g by the first editor is the editor is most popular books (and I this is a completely different problem that I suspect I can solve with some mongodb magic aggregation. see link for associated question at the end).
I want to have a button for "more editors", and one for "more books" under each editor. I've two collections, one for editors and one for books with a link back to the editors and I've setup two subscriptions, one for each with limits. Basically my template does
<template name="onepage">
{{#each editor in AllEditors}}
{{editor.name}}
{{> bookList editor }}
{{/each}}
<button>more editors</button>
</template>
<template name="bookList">
{{#each book in AllBooks}}
{{book.name}}
{{/each}
<button>more books</button>
</template>
The problem is that clicking on "more editors" my entire page re-render.
The new editor is correctly added at the end of the list, but the result is not very user friendly. I can see the problem. Requesting one more editor (using a subscription and a limit) I force to recompute the AllEditors variable, that force to recompute each BookList template. When I ask for more books, the new book is correctly added without flickering as I ask blaze to just add one element and it is smart enough to avoid re-rendering the entire template.
How can I restructure these two templates to avoid this problem ?
Update:
this is not the actual code I'm using, but this is the main idea for the onCreated and helpers functions
Template.onepage.onCreated () ->
template = this
template.limit = new ReactiveVar(10)
template.autorun () ->
limit = template.limit.get()
template.subscribe("editors",limit)
Template.onepage.helpers
'allEditors': () ->
template = Template.instance()
limit = template.limit.get()
Editors.find({},{}, {limit:limit})
And similarly for the book template
Associated question : sort mongo collection based on the score of child documents
When I do something like this, I do not separate into different templates. I use a template helper with a parent/child relationship.
Template.page.helpers({
groups() {
return ...
},
items(parent) {
if(parent) {
return ...
} else {
return null;
}
}
});
Simple example in html:
<div>
{{#each groups}}
{{this.groupname}}
{{#each items this}}
{{_id}}
{{/each}}
{{/each}}
</div>
Just make sure the groupname matches a field in items, so they can be grouped together. Start with an initial limit, then with a click event, expand that limit. This will cause the editors list to grow without the page refreshing. I use this method in quite a few areas with success.
I am using polymer and firebase to create a web app. To get a list in the database, I am using the "firebase-query" element of polymerfire.
Now, the list of items I am getting from the database is posts that people are posting on my app. Now I have the firebase-query element like this:
<firebase-query
id="query"
path="/posts"
limit-to-last="15"
data="{{posts}}">
</firebase-query>
and I have dom-repeat template tag to display the posts like this
<template is="dom-repeat" items="[[posts]]" as="post">
<div>[[post.content]]</div>
</template>
Now, if I have bunch of people posting a lot of contents at once, this list would be updating every second, and it would be hard to read.
Is there a way to prevent firebase-query element to stop updating once the initial load is complete, and possibly updating again when I call a certain function?
I tried to add a disabled attribute, but that just deletes whatever is inside the data attribute ({{posts}} in my case), so when disabled is set, nothing shows up on the screen.
I am not familiar with firebase-query, but you can do simple trick. On property posts set observer function.
posts: {
Type: Array,
value: function(){return []},
observer: "debouncePosts"
}
then in js you can define debounce function where I set, for example, 10 000 miliseconds (10 seconds) and called some callback function where I set this.posts to currentPosts property which will be rendered in template.
debouncePosts: function(data) {
this.debounce("debouncePost", function(){
this.set("currentPosts", this.posts);
}.bind(this), 10000)
}
and html template will be like:
<template is="dom-repeat" items="[[currentPosts]]" as="post">
<div>[[post.content]]</div>
</template>
documentation to debounce: https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-debounce
If you like to do it in different way like update data whenever user presses update, it's really easy now for you. Just set on-tap on some button and then in function you will do something like this.set("currentPosts", this.posts)
I want to create a confirm delete popup with Bootstrap 3. Is there any good comprehensive examples how to build one. I am very new to Meteor.
Use whatever example from Codrops, etc, just remember put the JSCode inside a
Template.nameTemplate.rendered = function() {}
So thats telling meteor to load that jscode, when the template has beed rendered and it can load any modal, etc...
So just follow whatever example you want, and just put whatever jQuery plugin etc, inside Rendered function
Also in some case the rendered its not enough, you need to use too,you can see timer docs here, anyways if you are having bad time, feel free to upload, some meteorPad, free nitrous box o repo on github and i can help you (i have a bad time with those modals on meteor to, they are a little trickys =p)
update answer
try to add meteor add iron:router, and on the client /app.js
Router.route('/', function () {
this.render('leaderboard');
});
And keep the same rendered like this.
Template.deleteBtn.rendered = function(){
$('.open-modal').on('click', function(e){
$('#confirm').modal()
.on('click', '#delete', function (e) {
// Remove selected player
Players.remove(Session.get("selectedPlayer"));
});
});
}
UPDATE
So using the peppelg:bootstrap-3-modalPackage, you can easy do the follow
First Create a template with the modal content
<template name="modal">
<!-- Modal Stuff -->
</template>
and easy call it on a Event handler.
Template.example.events({
'click #exampleButton':function(){
Modal.show('modal')
}
})
Now back to this example check this meteorpad from line 1-23 on app.'s and 41-62 on main.html
I'm just getting started with Meteor, and I'm a little confused; I'm not sure if this is a Meteor issue or a Handlebars issue.
I'm trying to create a nested menu (a set of clickable divs, each of which toggles a submenu consisting of more clickable divs). I want the submenus to be hidden by default but appear when the user clicks their parent.
This is what I've got:
Template.sidebutton.events({
click : function() {
this.clicked = !this.clicked;
clickHandlers[this.label]();
}
})
and
<template name = "sidebutton">
<div class = "sidebutton" id = "sidebutton_{{label}}"><p>{{label}}</p></div>
{{#if clicked}}
{{#each submenus}}
{{> submenu}}
{{/each}}
{{/if}}
</template>
I've verified that the onclick function fires when I click; this.clicked is toggled and my click handlers are called. I've also verified that the submenus appear if I strip out the #if block or if I set clicked to true on the initial page load. But the submenus do not appear when I click.
Is there something more I need to do? Everything I find about Meteor seems to imply that if I change any of the data, affected objects are re-rendered, but it seems like they're not being re-rendered here.
I suppose "clicked" is in your mongodb db collection element, in this case, you cannot change its value like you do. You have to call somthing like that :
myCollection.update(_id, {clicked:!clicked});
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.