Meteor and Alpaca forms

Question

I installed alpaca and alpaca-bootstrap

mrt add alpaca
mrt add alpaca-bootstrap

and put the code from alpaca homepage to my template like below. And there is no way I can make it work. I also tried not to use mrt package, put javascript in different file... Anyone has a clue? Thx

<template name="templates">
    <div id="content">
      <div class="container">
        <div class="row">
          <!--main content-->
          <div class="col-md-12">
            <h2 class="title-divider"><span>Templates<span class="de-em"></span></span> <small>What & who makes us tick!</small></h2>
            <div id="formxxx"></div>

            <script type="text/javascript">
              $(function() {
                $("#formxxx").alpaca({
                  "schema": {
                    "title": "User Feedback",
                    "description": "What do you think about Alpaca?",
                    "type": "object",
                    "properties": {
                      "name": {
                        "type": "string",
                        "title": "Name"
                      },
                      "ranking": {
                        "type": "string",
                        "title": "Ranking",
                        "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
                      }
                    }
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
</template>

Answer 1

Javascript code does not belong in templates. You should instead be placing that code in a "Template.created" event (http://docs.meteor.com/#template_created).

  Template.templates.created = function() {
    $("#formxxx").alpaca({
      "schema": {
        "title": "User Feedback",
        "description": "What do you think about Alpaca?",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "title": "Name"
          },
          "ranking": {
            "type": "string",
            "title": "Ranking",
            "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
          }
        }
      }
    });
  };

  Template.templates.destroyed = function() {
    $("#formxxx").alpaca().destroy(); // never used alpaca so it might not work, but you should destroy any event listeners when the template gets destroyed 
  };