보기의 Ember 로컬 변수

Question

"foos"라는 모델이있을 경우 Ember에서 data-template-name = "foos"라는 템플릿을로드하지만 "foos"를 닦을 방법을 모르겠습니다. 하나의 "foo"를로드 할 때뿐만 아니라 @ foos.length를 수행하는 컨트롤러와 같은 컨트롤러에서 인스턴스 변수를 사용하는 방법을 모르겠습니다. 내가하고 싶은 다른 것들을 위해서. foo # 4를 호출하는 경우뿐만 아니라 foos.isLoaded를 호출하면 현재 뷰가로드되지 않습니다. 뷰에 페이지를 appendTo합니다. 보기를 다시 그리지 않습니다.

저는 기본 정보가 어떻게 생겼는지 파악하는 방법을 모르겠습니다.

내 컨트롤러 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"

정확히는 데이터 템플릿 이름 =으로 템플릿을로드합니다. Convention은 같은 이름을 사용하는 것이지만 ember는 모델을 기반으로 템플릿을로드하지 않습니다. 무엇이든간에 그것은 다른 방향입니다. 가장 좋은 방법은 일반적으로 템플릿으로 시작한 다음 모델 레이어로 뒤로 이동하는 것입니다.

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

그러나 내가 1 "foo는"

를로드 할 때 화면에서 "FOOS"를 닦아하는 방법을 잘 모르겠습니다 : 응용 프로그램, foo는 및 FOOS - 따라서이 경우의 3 템플릿을 시작하자

경로가 변경되면 Ember가 적절한보기를 렌더링합니다. 이를 가능하게하는 한 가지 방법은 애플리케이션에 링크를 추가하는 것입니다. 예를 들어, 각 레코드가 링크가되도록 foos 템플리트를 수정하고 세부 사항 페이지에 모두 표시 링크를 추가하십시오. 나는 확실하지 않다뿐만 아니라

<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.length 할 @foos와 컨트롤러의 인스턴스 변수 당신이 무엇을 얻고 있는지 확실하지 않습니다. @foos는 인스턴스 변수가 아닙니다. 당신이 coffeescript를 사용하고 정말로 this.fo를 의미하지 않는 한 말입니다.

현재 fos # 4를 호출 한 경우뿐만 아니라 foos.isLoaded를 호출하면 내보기가로드되지 않습니다. 페이지 뷰에 appendTo가 추가됩니다. 보기를 다시 그리지 않습니다.

오른쪽. foos.isLoaded를 호출하면 모델이로드되었는지 여부 만 알 수 있습니다. 뷰와 관련이 없습니다. foo # 4라고 부르는 게 무슨 뜻이야? 참조하는 코드가 SO 게시물에 포함되지 않았을 수 있습니다.

저는 기본 정보가 어떻게 생겼는지 알아내는 방법을 모르겠습니다.

확인. 나는 당신이하려고하는 것에 대해 몇 가지 추측을하고 실제적인 예를 만들었습니다. 아래 코드 또는이를 참조하십시오. working example on jsbin

먼저 애플리케이션 정의를 추가했습니다. 그런 다음 경로를 records 대신 foos (으)로 변경했습니다. 이 경우에는 중첩 된 경로가 필요 없습니다. 있는 그대로

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

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

FooRoute, FoosController 및 FooController 확인했다.

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

추가 실종 DS.FixtureAdapter로 전환 App.Foo

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

에 대한 속성과, 당신은 더 완전한 예제를 제공 할 수 귀하의 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'} 
];