在ember.js中使用容器视图 - 如何从子视图访问父变量 [英] Using a container view in ember.js - how to access parent variables from child view

问题描述

这是一个 fiddler 。

正确的方式是这样做？

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

Javascript代码：

  App = Ember.Application.create（{
 rootElement：'#app'，
名称：'我的应用'，
准备好：function（）{
 console.log（'ready'）; 
}，
}）; 
 
 App.mod = Ember.Object.extend（{
 value：null，
 
 computed：function（value）{
 return'calculated' ; 
} .property（）
}）; 
 
 App.MyController = Ember.ArrayController.create（{
 content：[]，
 init：function（）{
 //创建模型的一个实例
 var item = App.mod.create（{
 value：'somevalue'
}）; 
 this.pushObject（item）; 
} 
 }）; 
 
 App.SecondView = Ember.View.extend（{
 tagName：'span'，
 classNames：['second']，
 template：Ember.Handlebars .compile（具有值的第二个视图：'{{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> 
测试< b> {{App.name}}< / b>< br>< br> 
 {{#each App.MyController.content}} 
应该打印：{{value}}& {{计算}} <峰; br><峰; br> 
 {{view App.ViewsContainer}} 
 {{/ each}} 
< / script> 
< / div> 
  

解决方案

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

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

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

它看起来很奇怪，ContainerView中的Views的上下文是ApplicationController，而父视图的上下文是MyController。 go图。

希望有帮助：）

I'm trying to access a parents view data from a container view, child view with no success.

Here is a fiddler for it.

What is the correct way to do this?

Using: ember-1.0.0-rc.1.js

Javascript code:

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
});

and the template:

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

解决方案

Interesting what you are trying to do. But I did find a way to accomplish it. Here is the Fiddle: http://jsfiddle.net/Sq2Dt/

You simply must climb the hierarchy of the views and then access the context like this:

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

It does seem kind of strange that the context of the Views inside the ContainerView is the ApplicationController while it's parents view's context is the MyController. Go figure.

Hope that helps :)

这篇关于在ember.js中使用容器视图 - 如何从子视图访问父变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！