Question

点击添加按钮后，我无法添加此内容。我对此完全陌生。

JS代码

    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();


    //

});

这是小胡子模板

    <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>

Answer 1

一旦我明确地将_AddView的el属性设置为创建_AddView时存在的标记，它就开始工作。

Answer 2

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

这里需要给予el。

因为只有在DOM生成之后......

Answer 3

您将Feed传递给_AddView初始化的方式，this.options可以访问它们（请参阅http://documentcloud.github.com/backbone/#View-constructor）。

我认为更好的方法是将您的成分集合传递给您_AddView，如下所示：

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

然后，在您的观点定义中，始终引用this.collection而不是this._Ingredients。我认为这是一种更标准的方法。

Backbone.js事件未触发

3 个答案: