用于更新视图的Ember.js选项 [英] Ember.js options for updating a view

问题描述

我一直在玩 Ember.js ，并且想知道更新 DOM的最佳做法是什么？ c>数据更改。

具体来说，我为每个模型的实例分配了一些打开和关闭按钮。如果模型对象的状态为open，我想要打开的按钮消失，如果模型的状态为关闭，则关闭按钮消失。

据我所知，有几个选项。

A）使用直接更改DOM中的元素jQuery 在控制器调用的视图中

B）设置一个将自动重新加载模板的观察者，如果/ else 模板中的语句，其中的事情应该根据更新的模型参数进行更改。

是那些首选（或两者）之一？你们会做什么？

解决方案

查看 这个小提琴 ，显示在其他视图/标签中实现的。此示例使用简单的 Em.Controller 而不是 Em.CollectionController ，但它会执行您所需要的。 / p>

我有2个css类：

  .visible {visibility：visible } 
 .invisible {visibility：hidden} 
  

以下视图在 classNameBinding 在子视图中。而且我将模型绑定到父视图，而 contentBinding 指向控制器上的模型，然后子视图具有一个属性，它观察 parentState 属性。
当您单击此子视图时，将将 currentState 设置为closed，它将评估 IsVisible 方法，它将适当的值提供给classNameBinding。

  App.OtherView = Em.View.extend（{
 templateName：'other'，
 contentBinding：'controller.content'，
 currentStateBinding：'controller.content.state'，
 ButtonView：Ember.View.extend（{
 tagName：'a'，
 click：function（e）{
 this.set（'parentView.currentState'，'closed'）; 
}，
 classNameBindings： 'IsVisible：btn visible：invisible'，
 IsVisible：function（）{
 return this.get（'parentView.currentState'）==='open'; 
} .property（' parentView.currentState'）
}）
}）; 
  

以下是设置模板的方式

 < script type =text / x-handlebarsdata-template-name =other> 
< h2>其他< / h2> 
 ID：{{content.id}}< br /> 
名称：{{content.name}}< br /> 
状态：{{content.state}}< br /> 
 {{#view view.ButtonView}} 
关闭
 {{/ view}} 
< / script> 
  

---

或者，我有这个此示例（这里是源）在如何使用 .property 的概念中非常相似，以实现相同的功能，但这更复杂一些导航栏菜单。检查我如何做 App.NavigationView ，你会发现一个名为 NavigationItemView 的子视图，我有一个 classNameBinding 。这样做是检查控制器中的属性的值，然后在视图上。该比较返回true或false，它将根据调用 isActive 函数属性的表达式填充类名称，几乎与基于您的问题。

希望这有帮助。

I've been playing around with Ember.js, and was wondering what are the best practices for updating the DOM on a data change.

Specifically, I have dividers with open and close buttons in them for each instance of a model. I want the open button to disappear if the state of the model object is "open", and the close button to disappear if the state of the model is "closed".

As far as I can tell, there are a couple of options.

A) Directly change elements in the DOM with jQuery in the view that called by the controller

B) Setup an observer that will auto reload the template, and have if/else statements in the template where things should change based on the model parameters that got updated.

Is one of those preferred (or neither)? What would you guys do?

解决方案

Take a look into this fiddle which shows this implemented in the other view/tab. This sample is using a simple Em.Controller instead of a Em.CollectionController, but it does what you need.

I have 2 css classes:

.visible {visibility: visible}
.invisible {visibility: hidden}

The following view is using them on classNameBinding at the child view. And I'm binding the model to the parent view with contentBinding pointing to the model at the controller, then the child view has a property that observes the currentState property at the parent. When you click this child view, it will set the currentState to 'closed' and it will evaluate the IsVisible method again, which feeds the proper value to the classNameBinding.

App.OtherView = Em.View.extend({
    templateName: 'other',
    contentBinding: 'controller.content',
    currentStateBinding: 'controller.content.state',
    ButtonView: Ember.View.extend({
        tagName: 'a',
        click: function(e) {
            this.set('parentView.currentState', 'closed');
        },
        classNameBindings: 'IsVisible:btn visible:invisible',
        IsVisible: function() {
            return this.get('parentView.currentState') === 'open';
        }.property('parentView.currentState')    
    })        
});

Here's how the template is being set up

<script type="text/x-handlebars" data-template-name="other" >
    <h2>Other</h2>
    ID: {{content.id}}<br />
    Name: {{content.name}}<br />
    State: {{content.state}}<br />
    {{#view view.ButtonView }}
        Close
    {{/view}}            
</script>

---

Alternatively, I have this this sample (here's the source) that's very similar in the concept of how to use the .property to achieve this same functionality, but this is a little more complex and that's for a navbar menu. Check how I'm doing the App.NavigationView, you'll find a child view named NavigationItemView which I have a classNameBinding. What this does is check the value of a property in my controller and then on the view. That comparison returns true or false, and it will populate the class name based on the expression that calls the isActive function property, almost same as the first fiddle that I wrote based on your question.

Hope this helps.

这篇关于用于更新视图的Ember.js选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！