ember.js - Ember 绑定在模板中工作，但不能通过扩展

Question

我可以像这样让绑定在模板中工作：

{{view App.MyView fooBinding:author}}

但是当我这样做extend 时：

App.MyView = Ember.View.extend
    fooBinding: "App.ApplicationController.author"

它不起作用。

我错过了什么？

Answer 1

如果你想在一个View类中绑定，你应该使用Controller.

根据命名约定，命名视图AuthorView将查找AuthorController或自动生成基本控制器。在您的代码中，您正在设置与类（表示类型）而不是实例（这是您的具体对象）的绑定。

如果您创建一个控制器，您可以在author那里定义一个属性，并且在您的视图类中，您可以定义一个绑定，例如fooBinding: "controller.author"因为它知道这controller是AuthorController.

App.AuthorController = Ember.Controller.extend
    author: Author.create
        firstName: 'Bill'
        lastName: 'Buckley'

App.AuthorView = Ember.View.extend
    templateName: 'author'
    fooBinding: "controller.author"
    fullName: (->
            author = @get 'foo'
            "#{author.get('firstName')} #{author.get('lastName')}"
    ).property 'firstName', 'lastName'

这种方法将迫使您view.binding.property在车把模板中使用：

<script type="text/x-handlebars" data-template-name='author'>
    Written by {{view.fullName}}
    <br />
    From Controller binding "fooBinding": {{view.foo.firstName}} {{view.foo.lastName}}
</script>

（见小提琴）

另一种方法是author通过以下方式从 Route 设置属性Route#setupController：

Author = Ember.Object.extend
    firstName: null
    lastName: null    
    fullName: (->
        author = @get 'foo'
        "#{@.get('firstName')} #{@.get('lastName')}"
    ).property 'firstName', 'lastName'

App.ApplicationRoute = Ember.Route.extend 
    setupController: (controller, model) ->
        controller.set 'author', Author.create
            firstName: 'Bill',
            lastName: 'Buckley'

而且您的模板可以author直接访问该属性，因为它位于该视图的控制器中：

<script type="text/x-handlebars" data-template-name='author'>
    written by: {{author.fullName}}
</script>

（见小提琴）

这样您就不必在任何地方设置任何绑定。

注意：在您的对象中创建计算属性，因为它不仅可以被视图使用，还可以被其他可能使用作者实例的对象使用，并避免使用undefined.

---

为了更好地使用 Ember 的功能，您可以为 Author 定义一个路由并content使用您的实例设置控制器的属性Author并将一个添加{{outlet}}到您的模板中。框架将再次使用命名约定找到您的控制器并连接模板：

车把

<script type="text/x-handlebars" data-template-name='author'>
    written by: {{fullName}}
</script>

<script type="text/x-handlebars">
    {{outlet}}
</script>

咖啡

window.App = App = Ember.Application.create()

App.Router.map ->
    @.route 'author', { path: '/'}

App.Author = Ember.Object.extend
    firstName: null
    lastName: null    
    fullName: (->
        "#{@.get('firstName')} #{@.get('lastName')}"
    ).property 'firstName', 'lastName'

App.AuthorRoute = Ember.Route.extend 
    setupController: (controller, model) ->
            # this could come from an api
            controller.set 'content', App.Author.create
                firstName: 'Bill',
                lastName: 'Buckley'

App.AuthorController = Ember.ObjectController.extend()

（见小提琴）