CODEWITHSUNDEEP
backbone.js
Micah
Micah

Reputation: 10395

Backbone.js Event Not firing

I can't get this thing to add when i click the add button. I'm completely new to this.

JS code

    function RecipeApp() {
    var _Ingredient=Backbone.Model.extend(COOKBOOK.Domain.Ingredient),  
    _Ingredients = Backbone.Collection.extend({
        model: _Ingredient
    }),
    _IngredientView = Backbone.View.extend({
        tagName: "li",
        initialize: function () {
            this.model.bind("change", this.render, this);
        },
        render: function () {
            var templateid = this.model.get('ViewID');
            $(this.el).html(Mustache.to_html($("#"+templateid).html(),this));
        }
    }),
    _AddView = Backbone.View.extend({
        id:"divAddIngredient",
        events: {
            "click .btn": "create"
        },
        render: function () {
            var tmpAddAnIngredient = $("#tmpMasterView").html(),
            $submain = $("#submain");
            $submain.html(Mustache.to_html(tmpAddAnIngredient, COOKBOOK.Domain));
        },
        initialize: function (ingredients) {
            console.log("init enter");
            this.render();
            this._Ingredients = ingredients;
            this._Ingredients.bind('add', this.add, this);
            console.log("init leave");
        },
        //added functions
        create: function () {
            console.log("create");
            var typename = this.$(".typeName").val(),
            ingredient = _.detect(COOKBOOK.Domain.Ingredients, function (i) { i.TypeName === typename });

            if (!!ingredient) {
                this._Ingredients.create(ingredient);
            }

        },
        add: function (ingredient) {
            console.log('add');
            var view = new _IngredientView(ingredient);
            this.$("#divIngredients").append(view.render().el);
        }
    });
    this.Ingredients = new _Ingredients();
    this.AddView = new _AddView(this.Ingredients);
}
$(function () {
     window.app = new RecipeApp();


    //

});

And here is the mustache template

    <script id="tmpTempDirectoryIngredient" type="text/html">
<div class="block-message">
<form>
    <fieldset>
        <legend>Create a Temporary Directory</legend>

    <div class="clearfix">
            <input type="text" name="DirectoryName" class="DirectoryName" />
    </div>
    </fieldset>
</form>
</div>
</script>
<script id="tmpMasterView" type="text/html">
<div class="block-message info" id="divAddIngredient">
    <form>
    <fieldset>
        <legend>Add an Ingredient</legend>

    <div class="clearfix">
        <select class="typeName">
            {{#Ingredients}}
            <option value="{{TypeName}}">{{Name}}</option>
            {{/Ingredients}}
        </select>
    </div>
    <div class="clearfix">
        <input type="button" class="btn primary" value="Add Ingredient" />
    </div>
    </fieldset>
</form>
</div>
<hr />
<div id="divIngredients">

</div>
</script>

Upvotes: 0

Views: 3024

Answers (3)

tejas tank
tejas tank

Reputation: 56

$(function(){
    new Apps({el:$("body"),'records':[1,2,3,4,5]});    
});

Here need to give el.

because of only after DOM is generating.....

Upvotes: 1

Micah
Micah

Reputation: 10395

it started working as soon as i explicitly set the el property of the _AddView to a tag that existed when the _AddView was created.

Upvotes: 1

timDunham
timDunham

Reputation: 3318

The way you are passing Ingredients to the _AddView initialize, they will be accessible by this.options (see http://documentcloud.github.com/backbone/#View-constructor).

I think a better way is pass your ingredients collection into you _AddView like this:

this.AddView = new _AddView({collection: this.Ingredients});

Then within your definition of your view, always refer to this.collection instead of this._Ingredients. That is I think a more standard way to do it.

Upvotes: 0

Related Questions