0

所以在 Ember 中，如果我有一个名为“foos”的模型 - 它会加载一个带有 data-template-name="foos" 的模板，但是当我加载 1“foo”时我不确定如何从屏幕上擦除“foos” " 以及我不确定如何在控制器中的实例变量（例如@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>

目前它不会杀死视图并引入新视图。

4

1 回答 1

2

嗯 - 这里发生了很多事情，试图为你指明正确的方向。

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

不完全是。约定是使用同名，但是ember不加载基于模型的模板。如果有的话，情况恰恰相反。你最好的选择通常是从模板开始，然后再回到模型层。所以在这种情况下，让我们从 3 个模板开始 - application、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 模板，使每条记录都是一个链接，并添加一个 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 以及调用 foo #4，我的视图不会加载它会将视图附加到页面。但不重绘视图。

对。调用 foos.isLoaded 只是告诉您模型是否已加载，它与视图无关。调用 foo #4 是什么意思？似乎您引用的代码可能未包含在您的 SO 帖子中。

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

好的。我已经对您尝试做的事情进行了一些猜测，并创建了一个工作示例。下面的代码，或者在 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'}
];
于 2013-02-05T03:07:24.197 回答