在ember.js中使用容器视图 - 如何从子视图访问父变量

时间:2013-03-29 14:59:42

标签: javascript ember.js

我正在尝试从容器视图访问父视图数据,子视图没有成功。

以下是fiddler

这样做的正确方法是什么?

使用:ember-1.0.0-rc.1.js

Javascript代码:

App = Ember.Application.create({
    rootElement: '#app',
    name: 'My app',
    ready: function(){
        console.log('ready');
    },
});

App.mod = Ember.Object.extend({
    value: null,

    computed: function(value) {
        return 'computed';
    }.property()
});

App.MyController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the model
        var item = App.mod.create({
            value: 'somevalue'
        });
        this.pushObject(item);
    }
});

App.SecondView = Ember.View.extend({
    tagName: 'span',
    classNames: ['second'],
    template: Ember.Handlebars.compile("second view with values: '{{value}}' & '{{computed}}'"),
});

App.FirstView = Ember.View.extend({
    tagName: 'span',
    classNames: ['first'],
    template: Ember.Handlebars.compile("first view"),
});

App.ViewsContainer = Ember.ContainerView.create({
    tagName: 'span',
    classNames: ['Container'],
    childViews: ['first_v', 'second_v'],
    first_v: App.FirstView,
    second_v: App.SecondView
});

和模板:

<div id="app">
    <script type="text/x-handlebars">
        Test <b>{{App.name}}</b><br><br>
        {{#each App.MyController.content}}
               this should be printed: "{{value}}" & "{{computed}}"<br><br>
            {{view App.ViewsContainer}}
        {{/each}}
    </script>
</div>

2 个答案:

答案 0 :(得分:5)

有趣的是你想​​做什么。但我确实找到了实现它的方法。这是小提琴:http://jsfiddle.net/Sq2Dt/

您只需爬上视图的层次结构,然后访问上下文:

{{view.parentView.context.value}} and {{view.parentView.context.computed}}

ContainerView内部的Views的上下文是ApplicationController,而它的父视图的上下文是MyController,这似乎有点奇怪。去图。

希望有所帮助:)

答案 1 :(得分:2)

是的,我也对此感到难过。这个线程帮助我顺利完成了这条道路,但就我而言,这就是解决方案。

// I use the #which command to preserve access to the outer context once inside the #each
{{#with view as myOuterView}}
  {{#each myInnerArray}}
    //here, i get my 'name' property from the *controller* of myOuterView
    {{myOuterView.controller.name}}
    // stuff i did in inner array
  {{/each}
{{/with}

我不确定为什么有时会使用控制器,有时候会使用控制器来访问它,但我想我会分享我的工作方式。