我是Ember JS的新手,这是一个小而简单的应用程序,用户在主视图中创建一个规则集,每个规则集都附加在主视图中,每个视图都包含一个用户的小视图可以注册规则,然后在规则集视图中列出每个规则,这样可以正常工作但是当用户创建规则集时,第一个规则集内的规则会在新规则集视图中重复。
我在做什么?
注意:我不想使用路线。
自己尝试一下,这样你就可以看到我在说什么。
我会提供任何帮助
<html>
<head>
<style type="text/css">
#maincontrol {
position:relative;
height:155px;
width:550px;
background-color:#F7C681;
border-radius:15px;
padding-bottom:20px;
}
.container {
position:relative;
padding-top:50px;
width:550px;
}
.ruleset {
position:relative;
height:550px;
width:550px;
background-color:#F7C681;
border-radius:15px;
padding-left:20px;
padding-top:20px;
padding-bottom:20px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application-template">
<div id="maincontrol">
<table>
<tr>
<td>Ruleset name:</td><td>{{view Ember.TextField valueBinding="controller.ruleset"}}</td>
</tr>
<tr>
<td>Log:</td><td>{{view Ember.TextArea valueBinding="controller.thelog" rows="5" cols="52"}}</td>
</tr>
<tr>
<td></td><td><button {{action "addPattern" target="controller"}}>Add ruleset</button></td>
</tr>
</table>
<div class="container">
{{#each data in controller}}
{{view Parsertool.PatterncontainerView controller=data }}
{{/each}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="patterncontainer-template">
<div class="ruleset">
<p>Ruleset: {{controller.name}}</p>
<table>
<tr>
<td>Log:</td><td>{{view Ember.TextArea valueBinding="controller.log" rows="5" cols="52"}}</td>
</tr>
</table>
<br>
<p>Create a rule</p>
{{#view Parsertool.CreateparseView}}
<div>
<table>
<tr>
<td>Name:</td>
<td>{{view Ember.TextField valueBinding="controller.rulename"}}</td>
</tr>
<tr>
<td></td><td><button {{action "addR" target="controller"}}>Add</button></td>
</tr>
</table>
</div>
<p>Rules created:</p>
{{#each pat in controller}}
{{view Parsertool.PatternruleView controller=pat}}
{{/each}}
{{/view}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="patternrule-template">
<table>
<tr>
<td>Name:</td><td>{{controller.rulename}}</td>
</tr>
</table>
</script>
<script>
window.Parsertool = Em.Application.create({});
//################### CONTROLLERS
Parsertool.IndexController = Em.ArrayController.extend({
content:[],
ruleset:"",
thelog:"",
iAm:"IndexController",
actions:{
addPattern:function(){
var t={"name":this.get("ruleset"),
"log":this.get("thelog")
};
this.get("content").pushObject(t);
}
}
});
Parsertool.PatterncontainerController = Em.ArrayController.extend({
content:[],
iAm:"PatterncontainerController",
parentController:Parsertool.IndexController.create(),
});
Parsertool.CreateparseController = Em.ArrayController.extend({
parentController:Parsertool.PatterncontainerController.create(),
content:[],
iAm:"CreateparseController",
rulename:"",
actions:{
addR:function(){
var ru={"rulename":this.get("rulename")
};
this.get("content").pushObject(ru);
}
}
});
//################### VIEWS
Parsertool.IndexView = Ember.View.extend({
templateName:"application-template",
controller:Parsertool.IndexController.create(),
init:function(){
return this._super();
}
});
Parsertool.CreateparseView = Em.View.extend({
controller:Parsertool.CreateparseController.create(),
init:function(){
return this._super();
}
});
Parsertool.PatterncontainerView = Ember.View.extend({
templateName:"patterncontainer-template",
init:function(){
return this._super();
}
});
Parsertool.PatternruleView = Ember.View.extend({
templateName:"patternrule-template"
});
</script>
</body>
</html>
答案 0 :(得分:0)
如果我理解正确,我认为它可能就在哪里
<p>Rules created:</p>
{{#each pat in controller}}
{{view Parsertool.PatternruleView controller=pat}}
{{/each}}
你不想在controller.ruleset中观看#each pat吗?否则它只会通过所有控制器。