8

所以我被困住了。我得到了很棒的 Backbone.Marionette 来处理我嵌套的孩子/父母的关系和渲染（用光秃秃的骨干做这件事是一场噩梦），但现在我面临着嵌套复合视图的问题，

我总是得到一个The specified itemViewContainerwas not found: .tab-content from the parent Composite view - CategoryCollectionView，虽然 itemViewContainer 在模板上可用，但这是我想要做的，我有一个我需要的餐厅菜单呈现，所以我有几个类别，在每个类别中我都有几个菜单项，所以我的最终 html 将是这样的：

    <div id="order-summary">Order Summary Goes here</div>
    <div id="categories-content">
         <ul class="nav nav-tabs" id="categories-tabs">
              <li><a href="#category-1">Appetizers</a></li>
         </ul>
         <div class="tab-content" >
               <div class="tab-pane" id="category-1">
                    <div class="category-title">...</div>
                    <div class="category-content">..the category items goes here.</div>
         </div>
     </div>

这是我到目前为止所拥有的：

首先是模板

模板骨架

<div id="order-summary"></div>
<div id="categories-content"></div>

模板菜单核心

<ul class="nav nav-tabs" id="categories-tabs"></ul>
<div class="tab-content" ></div>

模板类别

<div class="category-title">
    <h2><%=name%></h2>
    <%=desc%>
</div>
<div class="category-content">
    The menu items goes here
    <ul class="menu-items"></ul>
</div>

模板菜单项

Item <%= name%>
<strong>Price is <%= price%></strong>
<input type="text" value="<%= quantity %>" />
<a href="javascript:void()" class="add">Add</a>

现在脚本

var ItemModel = Backbone.Model.extend({
    defaults: {
        name: '',
        price: 0,
        quantity: 0
    }
});

var ItemView = Backbone.Marionette.ItemView.extend({
    template: '#template-menuitem',
    modelEvents: {
        "change": "update_quantity"
    },
    ui: {
        "quantity" : "input" 
    },
    events: {
        "click .add": "addtoBasket"
    },
    addtoBasket: function (e) {
        this.model.set({"quantity": this.ui.quantity.val() });
    },
    update_quantity: function () {
        //@todo should we do a re-render here instead or is it too costy
        this.ui.quantity.val(this.model.get("quantity"));
    }
});

var ItemCollection = Backbone.Collection.extend({
    model: ItemModel
});



var CategoryModel = Backbone.Model.extend({
    defaults: {
        name: ''
    }
});

var CategoryView = Backbone.Marionette.CompositeView.extend({

    template: '#template-category',

    itemViewContainer: ".menu-items",
    itemView: ItemView,

    className: "tab-pane",
    id: function(){
        return "category-" + this.model.get("id");
    },

    initialize: function () {

        this.collection = new ItemCollection();
        var that = this;
        _(this.model.get("menu_items")).each(function (menu_item) {
            that.collection.add(new ItemModel({
                id: menu_item.id,
                name: menu_item.name,
                price: menu_item.price,
                desc: menu_item.desc
            }));
        });


    }
});


var CategoryCollection = Backbone.Collection.extend({
    url: '/api/categories',
    model: CategoryModel
});

var CategoryCollectionView = Backbone.Marionette.CompositeView.extend({

    el_tabs: '#categories-tabs',

    template: '#template-menu-core',
    itemViewContainer: ".tab-content", // This is where I'm getting the error
    itemView: CategoryView,

    onItemAdded: function (itemView) {
        alert("halalouya");
        //this.$el.append("<li><a href=\"#cateogry-" + tab.get("id") + "\">" + tab.get("name") + "</a></li>");

        //$(this.el_tabs).append("<li><a href='#category-" + itemView.model.get("id") + "'>"
            //+ itemView.model.get("name") + "</a></li>")
    }
});

我知道这有点难以理解，但你们是我最后的手段。模板和类别获取以及其他东西没有问题（在将 CategoryCollectionView 从 Marionette 集合转换为复合视图之前，它已经在工作了。）

编辑 1

应要求添加了应用程序初始化程序：

            AllegroWidget = new Backbone.Marionette.Application();

            AllegroWidget.addInitializer(function (options) {

                // load templates and append them as scripts
                inject_template([
                        { id: "template-menuitem", path: "/js/templates/ordering-widget-menuitem.html" },
                        { id: "template-category", path: "/js/templates/ordering-widget-category.html" },
                        { id: "template-menu-core", path: "/js/templates/ordering-widget-menu-core.html" },
                        { id: "template-skeleton", path: "/js/templates/ordering-widget-skeleton.html" }
                    ]);

                // create app layout using the skeleton
                var AppLayout = Backbone.Marionette.Layout.extend({
                    template: "#template-skeleton",

                    regions: {
                        order_summary: "#order-summary",
                        categories: "#categories-content"
                    }
                });

                AllegroWidget.layout = new AppLayout();
                var layoutRender = AllegroWidget.layout.render();
                jQuery("#allegro-ordering-widget").html(AllegroWidget.layout.el);

                // Initialize the collection and views
                var _category_collection = new CategoryCollection();

                var _cateogories_view = new CategoryCollectionView({ api_key: window.XApiKey, collection: _category_collection });


                _category_collection.fetch({
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-ApiKey", window.XApiKey);
                    },
                    async: false
                });


                //AllegroWidget.addRegions({
                 ///   mainRegion: "#allegro-ordering-widget"
                //});
                AllegroWidget.layout.categories.show(_cateogories_view);

            });



            AllegroWidget.start({api_key: window.XApiKey});
4

2 回答 2

6

在调用该区域的 show 之前，您正在通过 fetch 添加到集合中。

Marionette.CompositeView 在将模型添加到它的集合时默认连接到附加 ItemViews。这是一个问题，因为 itemViewContainer .tab-content 尚未添加到 dom 中，因为尚未在该区域上调用 show。

易于修复，重新编写如下代码，它应该可以在不重载 appendHtml 的情况下工作。

// Initialize the collection and views
var _category_collection = new CategoryCollection();

// grab a promise from fetch, async is okay
var p = _category_collection.fetch({headers: {'X-ApiKey': window.XApiKey});

// setup a callback when fetch is done
p.done(function(data) {
   var _cateogories_view = new CategoryCollectionView({ api_key: window.XApiKey, collection: _category_collection });
   AllegroWidget.layout.categories.show(_cateogories_view);
});
于 2013-04-26T16:57:09.460 回答
0

好吧，这很奇怪，但是在 CategoryCollectionView 类中添加了这个：

appendHtml: function (collectionView, itemView, index) {
    //@todo very weird stuff, assigning '.tab-content' to itemViewContainer should have been enough 
    collectionView.$(".tab-content").append(itemView.el);
}

解决了这个问题，但是我不知道它为什么会起作用，将“.tab-content”分配给 itemViewContainer 应该就足够了，知道吗？

于 2013-04-26T12:19:54.780 回答