你如何正确显示基于模型的JavaScript数组属性一个骨干木偶集合看法？ [英] How do you properly display a Backbone marionette collection view based on a model javascript array property?
问题描述
* 更新：见最后的答案code，在过去code低于块的*
目前我有集合视图中显示收集的问题。该集合就像是现有模型的属性，因此（伪code）
ApplicationVersion {ID：1，版本名称：，ApplicationCategories []}
所以基本上ApplicationVersion有一个名为ApplicationCategories属性，它是一个JavaScript数组。目前，当我渲染ApplicationCategories没有呈现关联的集合视图。如果我在Chrome的JavaScript调试器调试看来类别还没有被填充，但（所以我想ApplicationVersion尚未获取）。这里是我的code，因为它目前为
ApplicationCategory模型，收集和查看
ApplicationModule.ApplicationCategory = Backbone.Model.extend（{
urlRoot：/ applicationcategories
}）;ApplicationModule.ApplicationCategories = Recruit.Collection.extend（{
网址：/ applicationcategories
型号：ApplicationModule.ApplicationCategory， 初始化：功能（）{
/ *
*缺省骨干不在集合更改事件绑定到比较
*出于性能的考虑。我选择不preoptimize虽然做的
* 捆绑。这可能需要的，如果性能成为一个问题以后更改。
*请参阅https://github.com/documentcloud/backbone/issues/689
*
*还要注意这只是默认的排序nescessary。通过使用
* SortableCollectionMixin其他排序方法，我们结合
*有作为。
* /
this.on（变，this.sort）;
}， 比较：功能（applicationCategory）{
返回applicationCategory.get（订单）;
}， 绰号：功能（）{
返回this.sortedBy（功能（applicationCategory）{
返回applicationCategory.get（名称）;
}）;
}
}）;_.extend（ApplicationModule.ApplicationCategories.prototype，SortableCollectionMixin）;ApplicationModule.ApplicationCategoryView = Recruit.ItemView.extend（{
模板：应用程序/ applicationcategory视图模板
}）;ApplicationModule.ApplicationCategoriesView = Recruit.CollectionView.extend（{
ItemView控件：ApplicationModule.ApplicationCategoryView
}）;
ApplicationCategory模板
＆lt;节ID =＆LT;％=名称％GT;＆GT;
＆LT;％=命令％＆GT;
＆LT; /节＆gt;
ApplicationVersion模型，收集和查看
ApplicationModule.ApplicationVersion = Backbone.Model.extend（{
urlRoot：/ applicationversions
}）;ApplicationModule.ApplicationVersions = Recruit.Collection.extend（{
网址：/ applicationversions
型号：ApplicationModule.ApplicationVersion
}）;ApplicationModule.ApplicationVersionLayout = Recruit.Layout.extend（{
模板：应用程序/ applicationversion视图模板， 地区：{
applicationVersionHeader：#applicationVersionHeader
applicationVersionCategories：#applicationVersionCategories
applicationVersionFooter：#applicationVersionFooter
}
}）;ApplicationModule.ApplicationVersionController = {
showApplicationVersion：功能（applicationVersionId）{
ApplicationModule.applicationVersion =新ApplicationModule.ApplicationVersion（{ID：applicationVersionId}）; VAR applicationVersionLayout =新Recruit.ApplicationModule.ApplicationVersionLayout（{
型号：ApplicationModule.applicationVersion
}）; ApplicationModule.applicationVersion.fetch（{成功：函数（）{
VAR applicationVersionCategories =新Recruit.ApplicationModule.ApplicationCategoriesView（{
集合：ApplicationModule.applicationVersion.application_categories
}）;
applicationVersionLayout.applicationVersionCategories.show（applicationVersionCategories）;
}}）; //假服务器响应请求
ApplicationModule.server.respond（）; Recruit.layout.main.show（applicationVersionLayout）;
}
};
下面是我的ApplicationVersion模板
＆lt;节ID =applicationVersionOuterSection＆GT;
＆LT;标题ID =applicationVersionHeader＆GT;
你的应用程序标题＆LT;％= ID％GT;
＆LT; /头＆GT;
＆lt;节ID =applicationVersionCategories＆GT;
＆LT; /节＆gt;
＆所述;页脚的id =applicationVersionFooter＆GT;
你的页脚
＆LT; /页脚＆GT;
有一点要注意我目前使用兴农嘲笑我的服务器响应，但我不认为这是造成问题，因为它是与响应的信息如我所料翻翻JavaScript调试器（就像我说的这正确显示ApplicationVersion ID）。我可以提供这个code，以及它是否有助于
这是目前显示应用程序版本ID（模板ID），所以我知道它是正确获取数据进行正常的属性，它只是不渲染我ApplicationCategories JavaScript数组属性。
所以，最后，我结合的取指ApplicationVersion成功，则设置为ApplicationCategories的看法。由于这是不工作像我期望我想知道是否有更好的方法来创建此集合看法？
感谢您的帮助。
更新：工作code的例子，德里克·贝利带领我太
ApplicationModule.ApplicationVersionController = {
showApplicationVersion：功能（applicationVersionId）{
ApplicationModule.applicationVersion =新ApplicationModule.ApplicationVersion（{ID：applicationVersionId}）; VAR applicationVersionLayout =新Recruit.ApplicationModule.ApplicationVersionLayout（{
型号：ApplicationModule.applicationVersion
}）; ApplicationModule.applicationVersion.fetch（）; //假服务器响应请求
ApplicationModule.server.respond（）; Recruit.layout.main.show（applicationVersionLayout）; VAR applicationVersionCategories =新Recruit.ApplicationModule.ApplicationCategoriesView（{
集合：新Backbone.Collection（ApplicationModule.applicationVersion.get（'application_categories'））
}）;
applicationVersionLayout.applicationVersionCategories.show（applicationVersionCategories）;
}
};
木偶的的CollectionView需要一个有效的Backbone.Collection，而不是一个简单的数组。你需要从你的阵列创建Backbone.Collection它传递给视图时：
新的MyView的（{
集合：新Backbone.Collection（MyModel.Something.ArrayOfThings）
}）;
*UPDATE: See final answer code in the last code block below.*
Currently I am having an issue displaying a collection in a collection view. The collection is a property of an existing model like so (pseudo code)
ApplicationVersion { Id: 1, VersionName: "", ApplicationCategories[] }
So essentially ApplicationVersion has a property called ApplicationCategories that is a javascript array. Currently when I render the collection view associated with ApplicationCategories nothing is rendered. If I debug in Chrome's javascript debugger it appears that the categories have not been populated yet (so I assume ApplicationVersion has not been fetched yet). Here is my code as it stands currently
ApplicationCategory Model, Collection, and Views
ApplicationModule.ApplicationCategory = Backbone.Model.extend({
urlRoot:"/applicationcategories"
});
ApplicationModule.ApplicationCategories = Recruit.Collection.extend({
url:"/applicationcategories",
model:ApplicationModule.ApplicationCategory,
initialize: function(){
/*
* By default backbone does not bind the collection change event to the comparator
* for performance reasons. I am choosing to not preoptimize though and do the
* binding. This may need to change later if performance becomes an issue.
* See https://github.com/documentcloud/backbone/issues/689
*
* Note also this is only nescessary for the default sort. By using the
* SortableCollectionMixin in other sorting methods, we do the binding
* there as well.
*/
this.on("change", this.sort);
},
comparator: function(applicationCategory) {
return applicationCategory.get("order");
},
byName: function() {
return this.sortedBy(function(applicationCategory) {
return applicationCategory.get("name");
});
}
});
_.extend(ApplicationModule.ApplicationCategories.prototype, SortableCollectionMixin);
ApplicationModule.ApplicationCategoryView = Recruit.ItemView.extend({
template:"application/applicationcategory-view-template"
});
ApplicationModule.ApplicationCategoriesView = Recruit.CollectionView.extend({
itemView:ApplicationModule.ApplicationCategoryView
});
ApplicationCategory template
<section id="<%=name%>">
<%=order%>
</section>
ApplicationVersion Model, Collection, and Views
ApplicationModule.ApplicationVersion = Backbone.Model.extend({
urlRoot:"/applicationversions"
});
ApplicationModule.ApplicationVersions = Recruit.Collection.extend({
url:"/applicationversions",
model:ApplicationModule.ApplicationVersion
});
ApplicationModule.ApplicationVersionLayout = Recruit.Layout.extend({
template:"application/applicationversion-view-template",
regions: {
applicationVersionHeader: "#applicationVersionHeader",
applicationVersionCategories: "#applicationVersionCategories",
applicationVersionFooter: "#applicationVersionFooter"
}
});
ApplicationModule.ApplicationVersionController = {
showApplicationVersion: function (applicationVersionId) {
ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId});
var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({
model:ApplicationModule.applicationVersion
});
ApplicationModule.applicationVersion.fetch({success: function(){
var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({
collection: ApplicationModule.applicationVersion.application_categories
});
applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories);
}});
// Fake server responds to the request
ApplicationModule.server.respond();
Recruit.layout.main.show(applicationVersionLayout);
}
};
Here is my ApplicationVersion template
<section id="applicationVersionOuterSection">
<header id="applicationVersionHeader">
Your Application Header <%= id %>
</header>
<section id="applicationVersionCategories">
</section>
<footer id="applicationVersionFooter">
Your footer
</footer>
One thing to note I am currently using Sinon to mock my server response, but I don't think this is causing the issues as it is responding with the information as I expect looking through the javascript debugger (and like I said it is displaying ApplicationVersion id correctly). I can provide this code as well if it helps
It is currently displaying the application version id (id in the template), so I know it is fetching the data correctly for normal properties, it just is not rendering my ApplicationCategories javascript array property.
So ultimately I am binding to the success of the fetch for ApplicationVersion, then setting up the view for the ApplicationCategories. Since this isn't working like I expect I am wondering if there is a better way to create this collection view?
Thanks for any help
UPDATE: Working code example that Derek Bailey lead me too.
ApplicationModule.ApplicationVersionController = {
showApplicationVersion: function (applicationVersionId) {
ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId});
var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({
model:ApplicationModule.applicationVersion
});
ApplicationModule.applicationVersion.fetch();
// Fake server responds to the request
ApplicationModule.server.respond();
Recruit.layout.main.show(applicationVersionLayout);
var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({
collection: new Backbone.Collection(ApplicationModule.applicationVersion.get('application_categories'))
});
applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories);
}
};
Marionette's CollectionView requires a valid Backbone.Collection, not a simple array. You need to create a Backbone.Collection from your array when passing it to the view:
new MyView({
collection: new Backbone.Collection(MyModel.Something.ArrayOfThings)
});
这篇关于你如何正确显示基于模型的JavaScript数组属性一个骨干木偶集合看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
