2

我有一个内置了基本功能的应用程序。我不会经历并添加其他功能。在这种情况下，我需要将当前使用的简单按钮转换linkTo为视图。问题是我不确定如何将一个转换为另一个并且仍然保持链接完整。

我该如何进行这种转换？这是我现在拥有的代码：

<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
    {{#linkTo "account" account}}
        <img {{bindAttr src="account.icon"}} />
    {{/linkTo}}
{{/each}}
</script>

这是我将拥有的代码：

<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
    {{#view "Social.AccountButtonView"}}
        <img {{bindAttr src="account.icon"}} />
    {{/view}}
{{/each}}
</script>

Social.AccountButtonView = Ember.View.extend({
    tagName: 'a',
    classNames: ['item-account'],
    click: function(){
        // do something
    }
});

我会假设我将在视图中的单击处理程序之上构建，但我不确定如何将引用传递给被迭代的项目，也不知道如何在视图中引用正确的路由。

请帮忙？

更新 1

#/accounts/4第一个版本根据我设置的路由器呈现一个值为 的 href 属性：

Social.Router.map(function() {
    this.resource('accounts', function(){
        this.resource('account', { path: ':account_id'});
    });
});

当我将当前代码转换为视图时，如何模仿 linkTo 提供的功能？

4

1 回答 1

1

account您可以在车把模板中定义属性绑定。此绑定的工作方式如下：

<script type="text/x-handlebars">
    <h1>App</h1> 
    {{#each item in controller}}
        {{#view App.AccountView accountBinding="item"}}
            <a {{bindAttr href="view.account.url"}} target="_blank">
                {{view.account.name}}
            </a>
        {{/view}}
    {{/each}}
</script>

请注意，我添加了accountBinding，所以一般规则是propertyName和Binding作为后缀。请记住，当您将属性添加到视图时，您将无法直接访问它，而是必须使用view.propertyName如上所示的方式访问它。

请记住，View使用帮助程序时必须有一个类{{view}}：

window.App = Em.Application.create();
App.AccountView = Em.View.extend(); // this must exist
App.ApplicationRoute = Em.Route.extend({
    model: function() {
        return [
            {id: 1, name: 'Ember.js', url: 'http://emberjs.com'}, 
            {id: 2, name: 'Toronto Ember.js', url: 'http://torontoemberjs.com'}, 
            {id: 3, name: 'JS Fiddle', url: 'http://jsfiddle.com'}];    
    }
})

工作小提琴：http: //jsfiddle.net/schawaska/PFxHx/

响应更新 1：

我发现自己处于类似的场景中，并最终创建了一个子视图来模仿{{linkTo}}助手。我真的不知道/认为这是最好的实现。你可以在这里看到我以前的代码：http: //jsfiddle.net/schawaska/SqhJB/

当时我在以下位置创建了一个子视图ApplicationView：

App.ApplicationView = Em.View.extend({
  templateName: 'application',
  NavbarView: Em.View.extend({
    init: function() {
      this._super();
      this.set('controller', this.get('parentView.controller').controllerFor('navbar'))
    },
    selectedRouteName: 'home',
    gotoRoute: function(e) {
      this.set('selectedRouteName', e.routeName);
      this.get('controller.target.router').transitionTo(e.routePath);
    },
    templateName: 'navbar',
    MenuItemView: Em.View.extend({
      templateName:'menu-item',
      tagName: 'li',
      classNameBindings: 'IsActive:active'.w(),
      IsActive: function() {
        return this.get('item.routeName') === this.get('parentView.selectedRouteName');
      }.property('item', 'parentView.selectedRouteName')
    })
  })
});

我的车把看起来像这样：

<script type="text/x-handlebars" data-template-name="menu-item">
  <a {{action gotoRoute item on="click" target="view.parentView"}}>
  {{item.displayText}}
  </a>
</script>

<script type="text/x-handlebars" data-template-name="navbar">
  <ul class="left">
    {{#each item in controller}}
      {{view view.MenuItemView itemBinding="item"}}
    {{/each}}
  </ul>
</script>

对不起，我不能给你更好的答案。这是我当时能想到的，从那以后就再也没有碰过。就像我说的，我不认为这是处理它的方法。如果您愿意查看{{linkTo}}帮助程序源代码，您将看到一个模块化且优雅的实现，可以作为您自己实现的基础。我猜你正在寻找的部分是href这样定义的属性：

var LinkView = Em.View.extend({
...
    attributeBindings: ['href', 'title'],   
    ... 
    href: Ember.computed(function() {
      var router = this.get('router');
      return router.generate.apply(router, args(this, router));
    })
...
});

所以我想，从那里你可以理解它是如何工作的并自己实现一些东西。让我知道这是否有帮助。

于 2013-02-26T16:31:44.753 回答