我有一个内置了基本功能的应用程序。我不会浏览并添加其他功能。在这种情况下,我需要将一个当前使用linkTo
的简单按钮转换为View。问题是,我不知道如何将一个转换为另一个,同时保持链接的完整性。
如何进行此转换?这是我现在的代码:
<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提供的功能?
您可以在手把模板中为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}}
助手。我真的不知道/认为这是最好的实现tho。你可以在这里看到我以前的代码: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));
})
...
});
所以我想,从那里你可以了解它是如何工作的,并自己实现一些东西。如果有帮助,请告诉我。