update results view with click on pagination

[tarponjargon]

This is more of a "Rivets 101" question than an issue, but I didn't know where else to ask...

I'm brand-new to the idea of javascript frameworks. Currently, I am currently using handlebars to create a view (of search results) from JSON data. That works fine, except I have to update the entire page by requesting a new URL as the user paginates thru the results. Ideally, I'd like to update only the results area rather than the entire page. Which lead me to rivets.

I like the idea of rivets.js as it's simple and light (kind of why I like handlebars), but I'm having trouble getting started. I've looked at all the samples and tutorials I can find. I feel like I know how to change a number or a color in another part of the DOM, but still have no idea how to approach common "developer" tasks (when you're new to the idea of frameworks)

I have the templating part all set - I'm loading the json and pagination into the DOM and binding it like this:

/* search term and search page are passed to server, JSON is response */
$.getJSON('/search?q=' + search_term + '&search_page=' + search_page)
.done(function(data) {

/* custom function generates pagination */
var p = getPagination(data.search_page,data.pages,data.size);

rivets.bind(
    document.querySelector('#es-results-container'),
    { 
        data: data, 
        pagination: p
    }
)

Then in the html:

<div id="es-results-container">
    <h1>{ data.hits } Search Results for { data.search_term }</h1>
    <div class="product" rv-each-product="data.results">
        <a rv-href="product.url"><img class="" rv-src="product.image" />
    </product>
    <div class="pagination__items" rv-each-pages="pagination.pages">
        <a class="pagination__item" href="#" rv-data-target="pages.page">{ pages.page }</a>
    </div>
</div>

That's rendering perfectly. I just can't figure out the next step - how to bind the pagination links to a function that will:

1. make a new ajax call that will pass search_term and search_page back to server
2. receive JSON response and update the #es-results-container

In my handlebars templates I'm doing this the "old fashioned" way with just:

search_term = data.search_term; search_page = $(this).attr("data-target"); window.location = '/search?q=' + search_term + '&search_page=' + search_page;

Seems like it should be easy to accomplish with rivets.js, but nothing I throw into rivets.binders seems to even come close to working. Can someone point me in the right direction? Perhaps I'm looking at it all wrong?

[Namek]

The object you pass into the bind function contains the data. Store that object in some variable and change the data properties dynamically using this variable. It should update the view.

For clicks take a look at http://rivetsjs.com/docs/reference/ rv-on-[event]

I agree on that the guide is pretty bad for newcomers.

[tarponjargon]

ahhh...OK, that makes sense. Thank you!