Question

所以在Ember如果我有一个名为“foos”的模型 - 它将加载一个带有data-template-name =“foos”的模板，但是我不知道如何在加载时从屏幕上擦除“foos” 1“foo”以及我不知道如何在控制器中的实例变量（如@foos）执行@ foos.length。对于我想做的其他一些事情。目前我的视图不会加载，如果我调用foos.isLoaded以及如果我调用foo＃4它将追加到页面视图。但不重绘视图。

我只是不知道如何弄清楚默认的东西是什么样的。

我的控制器东西 - 路由器

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

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

所以在Ember，如果我有一个名为“foos”的模型 - 它将加载一个模板，其中包含data-template-name =“foos”

不完全是。约定使用相同的名称，但是ember不会基于模型加载模板。如果有的话，那就是另一种方式。您最好的选择通常是从模板开始，然后向后工作到模型层。所以在这种情况下，让我们从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>

然而，当我加载1“foo”时，我不确定如何从屏幕上擦除“foos”

当路线改变时，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来为我想做的其他事情做@ foos.length

不确定你得到了什么。 @foos不是一个实例变量，除非你使用coffeescript并且真的是指this.foos。

目前我的视图不会加载，如果我调用foos.isLoaded以及如果我调用foo＃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原封不动。

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

Ember局部变量的视图

1 个答案: