另一个控制器内的Ember js控制器正在重复数据

时间:2014-03-22 00:39:40

标签: javascript html css ember.js

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

1 个答案:

答案 0 :(得分:0)

如果我理解正确,我认为它可能就在哪里

<p>Rules created:</p>
{{#each pat in controller}}
  {{view Parsertool.PatternruleView controller=pat}}
{{/each}}

你不想在controller.ruleset中观看#each pat吗?否则它只会通过所有控制器。