Ember.js - 如何使用Ember.Router将集合正确绑定到视图？

Question

我之前使用Ember.StateManager，现在我正在做一些测试，然后我终于切换到Ember.Router，但我无法理解如何正确绑定驻留在控制器中的集合中的视图数据。

我有Ember.Router一个非常简单的测试结构，它是工作的罚款导航明智，但是当涉及到数据绑定预期它不工作，我承认我现在迷路了。至于我的数据，我有一个简单的ASP.NET MVC4 Web API运行REST服务，它工作正常（我用Fiddler测试过，它都很好）。用EF4存储SQL，并且没有问题。

对于客户端应用程序，在我contacts.index路线，我试图在connectOutlets（我应该在不同的方法来这样做呢？），但我的代码似乎并不正确，因为工作我的看法是它结合没有约束。

我有尝试过，在contacts.index路线的connectOutlets方法：

router.get('applicationController').connectOutlet('contact'); 

router.get('applicationController').connectOutlet(
    'contact', 
    router.get('contactController').findAll() 
); 

我也尝试使用enter法

this.setPath('view.contacts', router.get('contactController').content); 

我曾尝试直接的观点一样，将它绑定：

App.ContactView = Ember.View.extend({ 
    templateName: 'contact-table' 
    contactsBinding: 'App.ContactController.content' 
}); 

这里是我的代码的当前版本：

var App = null; 

$(function() { 

    App = Ember.Application.create(); 

    App.ApplicationController = ... 
    App.ApplicationView = ... 

    App.HomeController = ... 
    App.HomeView = ... 

    App.NavbarController = ... 
    App.NavbarView = ... 

    App.ContactModel = Ember.Object.extend({ 
     id: null, 
     firstName: null, 
     lastName: null, 
     email: null, 
     fullName: function() { 
      return '%@ %@'.fmt(this.firstName, this.lastName) 
     }.property('firstName', 'lastName') 
    }); 

    App.ContactController = Ember.ArrayController.extend({ 
     content: [], 
     resourceUrl: '/api/contact/%@', 
     isLoaded: null, 

     findAll: function() { 
      _self = this; 
      $.ajax({ 
       url: this.resourceUrl.fmt(''), 
       type: 'GET', 
       contentType: 'application/json; charset=utf-8', 
       success: function (data) { 
        $(data).each(function() { 
         _self.pushObject(App.ContactModel.create({ 
          id: this.Id, 
          firstName: this.FirstName, 
          lastNaem: this.LastName, 
          email: this.Email 
         })); 
        }); 
        alert(_self.get('content').length); 
        // this alerts 6 which is the same number of 
        // records in my database, and if I inspect 
        // the content collection in chrome, I see my data 
        // that means the problem is not the ajax call 
       }, 
       error: function (xhr, text, error) { 
        alert(text); 
       } 
      }); 
     }, 
     find: function (id) { 
      // GET implementation 
     }, 
     update: function (id, contact) { 
      // PUT implementation 
     }, 
     add: function (contact) { 
      // POST implementation 
     }, 
     remove: function(id) { 
      // DELETE implementation 
     } 
    }); 

    App.ContactView = Ember.View.extend({ 
     templateName: 'contact-table' 
    }); 
    App.ContactListItemView = Ember.View.extend({ 
     templateName: 'contact-table-row' 
    }); 

    App.Router = Ember.Router.extend({ 
     enableLogging: true, 
     location: 'hash', 

     root: Ember.Route.extend({ 
      // actions 
      gotoHome: Ember.Route.transitionTo('home'), 
      gotoContacts: Ember.Route.transitionTo('contacts.index'), 

      // routes 
      home: Ember.Route.extend({ 
       route: '/', 
       connectOutlets: function (router, context) { 
        router.get('applicationController').connectOutlet('home'); 
       } 
      }), 
      contacts: Ember.Route.extend({ 
       route: '/contacts', 
       index: Ember.Route.extend({ 
        _self: this, 
        route: '/', 
        connectOutlets: function (router, context) { 
         router.get('contactController').findAll(); 
         router.get('applicationController').connectOutlet('contact'); 
         router.get('contactView').set('contacts', router.get('contactController').content); 
         // if I inspect the content collection here, it's empty, ALWAYS 
         // but if I access the same route, the controller will alert 
         // the number of items in my content collection 
        } 
       }) 
      }) 
     }) 
    }); 
    App.initialize(); 
}); 

下面是相关的模板：

<script type="text/x-handlebars" data-template-name="contact-table"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Email</th> 
      </tr> 
     </thead> 
     <tbody> 
      {{#if contacts}} 
       {{#each contact in contacts}} 
        {{view App.ContactListItemView contactBinding="contact"}} 
       {{/each}} 
      {{else}} 
       <tr> 
        <td colspan="2"> 
        You have no contacts <br /> 
        :( 
        <td> 
       </tr> 
      {{/if}} 
     </tbody> 
    </table> 
</script> 

<script type="text/x-handlebars" data-template-name="contact-table-row"> 
    <tr> 
     <td> 
      {{contact.fullName}} 
     </td> 
     <td> 
      e-mail: {{contact.email}} 
     </td> 
    </tr> 
</script> 

作为一个测试，我也尝试在我的控制器中手动填充content集合，如下所示，但是同样是空的n个I浏览到这条路线：

App.ContactController = Ember.ArrayController.extend({ 
    content: [], 
    init: function() { 
     this._super(); 
     this.pushObject(
      App.ContactModel.create({ ... }) 
     ); 
    } 
}) 

权，如果你设法读取到现在为止，这是我的问题： 如何收集正确绑定使用Ember.Router一个看法？

我已经看到了大量的实例，以及在这样其他的问题，我还没有看到任何东西，我还没有工作（请随时指出其他样品与结合）

谢谢你

Answer 1

绑定不起作用，因为“该数组是变异的，但属性本身并没有改变”。 https://stackoverflow.com/a/10355003/603636

使用App.initialize和Ember.Router，视图和控制器现在正在自动连接。手动将视图中的联系人绑定到控制器的内容几乎没有什么理由，因为您已经有权访问它。

更改您的视图的模板，包括：

{{#if controller.isLoaded}} // set this true in your ajax success function 
    {{#each contact in controller}} 
    {{view App.ContactListItemView contactBinding="contact"}} 
    {/each}} 
{{else}} 
    <tr> 
    <td colspan="2"> 
     You have no contacts <br /> 
     :( 
    <td> 
    </tr> 
{{/if}}