在emberjs中创建特定于视图实例的绑定的理想方法是什么? [英] What is the ideal way to create view-instance-specific bindings in emberjs?

问题描述

我有一个在{{#each}}块中实例化的视图，因此有多个实例.每个视图都必须具有特定于该视图实例的对象的绑定属性.因此，声明绑定的通常方法是:

I have a view that is instantiated in an {{#each}} block, so there are multiple instances. Each view needs to have a bound property to an object that is specific to that view instance. So the usual way of declaring a binding:

App.hash = Ember.Object.create({
   item1: "one",
   item2: "two"
});
App.MyView = Ember.View.extend({
   itemBinding: "App.hash.itemN"
});

不起作用，因为当我定义绑定映射到( App.hash.itemN )时，我仍然不知道它应该是item1还是item2(在上面的代码中用itemN).

won't work because When I define what the binding maps to (App.hash.itemN) I don't know yet whether it should be item1 or item2 (represented in the above code by itemN).

我找到了解决此问题的方法，这似乎有些笨拙，并且对是否有适当的方法感到好奇.这是我的解决方案:

I have found a way around this, that seems a bit kludgey, and am curious if there's a proper way. Here is my solution:

App.MyView = Ember.View.extend({
   didInsertElement: function() {
      this.set('stub', Ember.Object.create({
        itemBinding: "App.hash."+this.get('content')}))
   }
})

然后在我的模板中，我可以执行以下操作:

Then in my template I can do the following:

{{#each App.itemController}}
   {{#view App.MyView contentBinding="this"}}
      {{stub.item}}
   {{/view}}
{{/each}}

是否有更好的方法可以做到这一点?我的抱怨是我觉得自己正在创建一个不必要的对象.另外，如果我希望视图的其他属性依赖于此特定于实例的对象，我可以说 .property(stub.item)可以正常工作，尽管在声明时为stub.item还不存在.

Is there a better way to do this? My complaints are that I feel like I'm creating an unnecessary object. Also, if I want other properties of my view to depend on this instance-specific object, I can say .property(stub.item) which happens to work, despite that when it's declared, stub.item doesn't exist yet.

我认为可能有一些方法涉及手动创建绑定，但是我无法弄清楚.

I thought there might be some way involving manually creating a binding, but I couldn't figure that out.

谢谢！

更新:

我已经确认克里斯托弗·斯瓦西(Christopher Swasey)的解决方案有效.我已经在要点中充实了它:

I've confirmed that Christopher Swasey's solution works. I've fleshed it out in this Gist:

https://gist.github.com/2606979

这非常有用，因为我了解了更多关于观察和回调的信息.尽管最后，我不确定该解决方案要简单得多.尽管如此，它至少也可以正常工作.

This was very helpful, as I learned more about observes and callbacks. Although in the end, I'm not sure how much simpler this solution is. Nonetheless, it works at least as well.

推荐答案

您可以将stub设为计算属性:

You can make stub a computed property:

hashBinding: 'App.hash',
stub: function() {
    return this.get('hash').get(this.get('content'))
}.property('hash', 'content').cacheable()

已更新:

contentWillChange: function() {
    this.removeObserver('hash.' + this.get('content'), this, 'stubDidChange');
}.observesBefore('content'),

contentDidChange: function() {
    this.addObserver('hash.' + this.get('content'), this, 'stubDidChange');
    this.stubDidChange();
}.observes('content'),

stubDidChange: function() {
    this.notifyPropertyChange('stub');
},

stub: function() {
    return this.get('hash').get(this.get('content'))
}.property().cacheable()

这篇关于在emberjs中创建特定于视图实例的绑定的理想方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！