如何擴展骨幹視圖

我是SPA的新骨幹，我試圖通過使用backbone和requireJs來開發一個小應用程序。如何擴展骨幹視圖

我面臨的問題是我無法通過傳遞集合來擴展視圖。

好了，這是名稱的觀點MenuView.js

define([ 
'Backbone' 
], function (Backbone) { 
var MenuView = Backbone.View.extend({ 
    tagName: 'ul', 
    render: function() { 
     _(this.collection).each(function (item) { 
      this.$el.append(new MenuListView({ model: item }).render().el); 
     }, this); 
     return this; 
    } 
}); 
return new MenuView; 
});

，這是router.js其中錯誤出現

define([ 
    'Underscore', 
    'Backbone', 
    'views/menu/menuView', 
    'views/createNew/createNew', 
    'collections/menu/menuCollection', 
], function (_, Backbone, MenuView, CreateNewView,Menucollection) { 

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     'index': 'index', 
     'action/:Create': 'Create' 
    }, 
    index: function() { 
     CreateNewView.clear(); 
     //----------- HERE IS THE PROBLEM ------------ 
     $('#menu').html(MenuView({ collection: Menucollection.models }).render().el); 
    }, 
    Create: function() { 
     CreateNewView.render(); 
    } 
}); 

var initialize = function() { 
    var appRouter = new AppRouter(); 
    Backbone.history.start(); 
    appRouter.navigate('index', { trigger: true }); 
}; 

return { 
    initialize: initialize 
}; 
});

該錯誤消息「對象不是一個功能」。我同意這一點，因爲MenuView不是一個函數。我試圖擴展MenuView（MenuView.extend（{collection：Menucollection.models}）），錯誤消息是「objet [object，object]沒有方法擴展」。

我想，我試圖做到這一點的方式，是遠離正確的。

任何人都可以建議如何做到這一點？

感謝

來源

2012-10-07 StrouMfios

你MenuView.js返回一個初始化MenuView，所以你可以只是做：

MenuView.collection = Menucollection

注意我沒有選擇的車型 - 我認爲這是更好，如果你不使用這些模型可以替代您的視圖集合，因爲讀取代碼會導致混淆，並且沒有Backbone集合作爲視圖的集合。您也將失去集合中包含的方法（例如獲取/更新）。

如果你這樣做，那麼你就需要更新您的循環（每個可作爲集合的方法）：

this.collection.each(function (item) { 
      this.$el.append(new MenuListView({ model: item }).render().el); 
     }, this);

來源

2012-10-07 12:57:47

感謝您的回答約翰。這工作！ – StrouMfios

@Matti約翰的解決方案將工作，但它更是一個解決辦法比的恕我直言最佳做法。

限制你從來沒有接受參數
撞擊性能
使得它真的很難單元測試，如果你繼電器：

正因爲如此，你只是需要它，其中，對你的看法在構建實例時分配屬性。

模塊應該返回'class'視圖，而不是該視圖上的實例。

在MenuView.js我會return MenuView;取代return new MenuView和要求router.js時intitalzie它。

來源

2012-10-08 00:37:10

謝謝 - 你是對的，我的回答剛剛解決了症狀，而不是問題的原因。 –

如何擴展骨幹視圖

回答

相關問題