在视图中注入局部变量

Question

因此，在Ember中，如果我有一个名为“foos”的模型 - 它将使用data-template-name =“foos”加载模板，但是我不确定如何从“擦除”当我加载1“富”屏幕，以及我不知道如何可以在控制器中的实例变量，如@ foos做@ foos.length。对于我想要做的其他事情。 目前我的视图不加载，如果我打电话给foos.isLoaded以及如果我打电话给foo＃4它会追加到页面的视图。但不重绘视图。

我只是不知道如何找出默认东西看起来像我猜。

我控制器stuff- 路由器

App.Router.map(function(){ 
    this.resource('records', function(){ 
     this.resource('record', {path: ':record_id'}); 
    }); 
}); 

App.FoosRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Foo.find(); 
    } 
}); 

// Controller 
App.FoosController = Ember.ArrayController.extend({ 
    itemController: 'record' 
}); 

App.FooController = Ember.ObjectController.extend({ 
    fullName: function() { 
     return this.get('firstName') + ' ' + this.get('middleName') + ' ' + this.get('surname') + ' ' + this.get('suffix') 
    }.property('firstName', 'middleName', 'surname', 'suffix') 
}) 

// Model 
App.Store = DS.Store.extend({ 
    revision: 11, 
    adapter: 'DS.RESTAdapter' 
}); 


App.Foo = DS.Model.extend({ 
    firstName: DS.attr('string'), 
    middleName: DS.attr('string') 
    ..... 
}) 

我的观点：

<script type="text/x-handlebars" data-template-name="application"> 
    {{ outlet }} 
</script> 


<script type="text/x-handlebars" data-template-name="foos"> 
    <div class="one_half"> 
    <h2>Search</h2> 
    form here.... 
    </div> 
    <div class="one_half"> 
    <div id="smallMap"> 
     map 
    </div> 
    </div> 
    <div id="foos"> 

    <table> 
     <tr> 
     <th>Name</th> 
     <th>Birth</th> 
     <th>Death</th> 
     </tr> 

     {{#each foo in controller}} 
     {{#if foo.isLoaded}} 
     <tr> 
     <td>{{#linkTo "foo" foo}} {{foo.fullName}} {{/linkTo}}</td> 
     <td>{{#linkTo "foo" foo}} {{foo.birthMonth}} {{#if foo.birthMonth}}/{{/if}}{{foo.birthDay}} {{#if foo.birthDay}}/{{/if}}{{foo.birthYear}} {{/linkTo}}</td> 
     <td>{{#linkTo "foo" foo}}{{foo.deathMonth}}{{#if foo.deathMonth}}/{{/if}}{{foo.deathDay}}{{#if foo.deathDay}}/{{/if}}{{foo.deathYear}}{{/linkTo}} {{foo.trAlt}}</td> 
     </tr> 
     {{else}} 
     <tr> 
     <td colspan="3" class="loading">Records are loading</td> 
     </tr> 
     {{/if}} 
     {{/each}} 
    </table> 

    </div> 

    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="foo"> 
    <h3>A Record</h3> 
    {{id}} 
    {{firstName}} 
</script> 

目前，它不会杀死的观点，并在新的带来。

Answer 1

嗯 - 这里有很多事情要做，试着指出你在正确的方向。

所以在灰烬，如果我有一个名为“FOOS”的模式 - 它会加载一个模板与数据模板名称=“FOOS”

不完全是。约定是使用相同的名称，但是该烬丝不会根据模型加载模板。如果有的话，这是另一回事。你最好的选择通常是从模板开始，然后回到模型层。因此，在这种情况下，让我们开始用3个模板 - 应用程序，foo和FOOS：

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Foo App</h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="foos"> 
    <h3>All Foos:</h3> 
    <ul> 
    {{#each controller}}<li>{{fullName}}</li>{{/each}} 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="foo"> 
    <h3>Foo Details:</h3> 
    <p>{{fullName}}</p> 
</script> 

但我不知道如何从屏幕擦“的Foo”当我加载1“富”

当路线改变时，Ember将负责渲染适当的视图。一种可能的方法是添加链接到您的应用程序。例如，修改foos模板以便每条记录都是一个链接，并将一个Show All链接添加到详细信息页面。

<script type="text/x-handlebars" data-template-name="foos"> 
    <h3>All Foos:</h3> 
    <ul> 
    {{#each controller}} 
    <li>{{#linkTo "foo" this}}{{fullName}}{{/linkTo}}</li> 
    {{/each}} 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="foo"> 
    <h3>Foo Details:</h3> 
    <p>{{fullName}}</p> 
    <p>{{#linkTo foos}}Show all{{/linkTo}}</p> 
</script> 

以及我不知道如何能在控制器中的实例变量如@foos做@ foos.length一些其他的东西，我想要做的

不知道你在做什么。 @foos不是一个实例变量，除非你使用coffeescript并且确实代表this.foos。

如果我打电话给foos.isLoaded以及如果我打电话给富＃4它目前我的视图不会加载它会追加到页面的视图。但不重绘视图。

没错。调用foos.isLoaded只会告诉你模型是否被加载，与视图无关。你是说什么叫foo＃4？似乎有可能是你引用的代码没有包含在你的SO帖子中。

我只是不知道如何找出默认东西看起来像我猜。

好的。我对你想要做什么做了一些猜测，并创建了一个工作示例。代码如下，或看到这个working example on jsbin

首先，我已经添加了一个应用程序定义。然后将您的路线更改为foos而不是records。在这种情况下也不需要嵌套路由。

App = Em.Application.create({}); 

App.Router.map(function(){ 
    this.route('foos', {path: '/'}); 
    this.resource('foo',{path: '/foos/:foo_id'}); 
}); 

FooRoute，FoosController和FooController都是OK原样。

App.FoosRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Foo.find(); 
    } 
}); 

// Controller 
App.FoosController = Ember.ArrayController.extend({ 
    itemController: 'foo' 
}); 

App.FooController = Ember.ObjectController.extend({ 
    fullName: function() { 
     return this.get('firstName') + ' ' + this.get('middleName') + ' ' + this.get('surname') + ' ' + this.get('suffix'); 
    }.property('firstName', 'middleName', 'surname', 'suffix') 
}); 

添加缺少的属性，以App.Foo

App.Foo = DS.Model.extend({ 
    firstName: DS.attr('string'), 
    middleName: DS.attr('string'), 
    surname: DS.attr('string'), 
    suffix: DS.attr('string') 
}); 

切换到DS.FixtureAdapter并加入4个夹具记录，以模拟一下可能会被你的API

App.Store = DS.Store.extend({ 
    revision: 11, 
    adapter: DS.FixtureAdapter 
}); 

App.Foo.FIXTURES = [ 
    {id: 1, firstName: 'Michael', middleName: 'Paul'}, 
    {id: 2, firstName: 'Jennifer', middleName: 'Lyn'}, 
    {id: 3, firstName: 'Sophia', middleName: 'Marie'}, 
    {id: 4, firstName: 'Greta', middleName: 'Fae'} 
];